有的時候，某一個塊裏的內容很少，但是我們有將該塊寫死了，從而導致空了很大區域；亦或者一個塊的內容比較多，多到溢出。這些情況都是不美觀的。
我們設置border，這樣可以看到outer塊的區域,其高度隨着內容變化而變化：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.outer{
border:10px red solid;
}
.inner{
background-color: green;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
但是，有的時候outer裏不只是放一個塊，要排列好幾個水平塊，這就要用到子元素浮動了。浮動真的可以解決我們的需求嗎？
下面對inner設置浮動。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.outer{
border:10px red solid;
}
.inner{
background-color: green;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
由於浮動是不佔位置的，故outer的內容就沒有，無法被撐開。拋開這個弊端，我們來看其是否對網頁的其他排版造成影響呢？
我們加一個outer2塊：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.outer{
border:10px red solid;
}
.inner{
background-color: green;
width: 100px;
height: 100px;
float: left;
}
.outer2{
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
<div class="outer2">
</div>
</body>
</html>
加了outer2塊後，我們可以看到outer2塊的位置移動了，說明父元素高度丟失以後，其下的元素會自動上移，這就是高度塌陷，導致頁面的混亂。因此此方式要摒棄。
如果將outer的display設置爲inline-block,雖然解決了高度的問題，但是border的寬度也會隨內容改變。
爲解決這個問題，我們要提到BFC(Block Formatting Context），塊級格式化環境。
-BFC 是css一個隱含的屬性，可以爲一個元素開啓BFC。開啓BFC該元素會變成一個獨立的佈局區域。
-元素開啓BFC後的特點：
1.開啓BFC 的元素不會被浮動元素所覆蓋。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: #bfa;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: pink;
/*開啓了box2的BFC，box2不會被box1覆蓋。*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
2.開啓BFC的元素子元素和父元素外邊距不會重疊。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
overflow: hidden;
}
.box3{
width: 100px;
height: 100px;
background-color: pink;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box1">
<div class="box3"></div>
</div>
</body>
</html>
如果不開啓BFC的話，調整子元素，會導致父元素位置隨着變化，如下：
3.開啓BFC的元素可以包含浮動的子元素。
-可以通過一些特殊方式來開啓元素的BFC：
1.設置元素的浮動。(不推薦)
2.將元素設置爲行內塊元素。
3.將元素的overflow設置爲非visible的值。scroll帶滾動條，auto或者hidden不帶滾動條，可以將overflow設置爲auto或者hidden來開啓其BFC，這樣就可以包含浮動元素了。
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.outer{
border:10px red solid;
overflow: hidden;
}
.inner{
background-color: green;
width: 100px;
height: 100px;
float: left;
}
.outer2{
background-color: pink;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
<div class="outer2">
</div>
</body>
</html>
其實開啓BFC的方式非常多，overflow：hidden是其中副作用較小的一個。