當不給父元素設置寬高時，父元素的寬高會被子元素的內容撐開。但是當子元素設置浮動屬性後，子元素會溢出到父元素外，父元素的寬高也不會被撐開了，稱之為“高度塌陷”。 解決辦法： 1.給父元素設置 overflow 添加 overflow 不僅減少了代碼量，還不存在語義化的問題，但是也可能因為內容增加導致超 ...
當不給父元素設置寬高時，父元素的寬高會被子元素的內容撐開。但是當子元素設置浮動屬性後，子元素會溢出到父元素外，父元素的寬高也不會被撐開了，稱之為“高度塌陷”。
<div class="container"> <div class="box_1 float">box 1</div> <div class="box_2 float">box 2</div> </div>
.container {
border: 3px solid #8990D5;
}
.box_1 {
height: 100px;
width: 100px;
text-align: center;
background-color: #FFB5BF;
}
.box_2 {
height: 100px;
width: 100px;
text-align: center;
background-color: #94E8FF;
}
.float {
float: left;
}
解決辦法：
1.給父元素設置 overflow
添加 overflow 不僅減少了代碼量，還不存在語義化的問題，但是也可能因為內容增加導致超出尺寸的內容被隱藏。僅設置overflow: hidden; 為什麼就能清除浮動呢？
這裡要引入一個概念：BFC（Block Formatting Context），塊級格式化上下文。BFC 的一個特性便是可以包含浮動元素，設置 overflow 為 hidden 滿足了創建一個 BFC 的條件，其實就是創建 BFC，利用 BFC 固有特性清除浮動。
.container{
overflow: hidden;
zoom: 1; /* 相容 IE6、IE7*/
}
2.使用 after 偽元素
:after 偽元素表示在元素之後添加內容。
該方法本質是在末尾添加一個看不見的塊元素來清除浮動。這個方法不存在語義化的問題，是目前的主流清除浮動的方法。
.container::after {
content: '';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.container {
border: 3px solid #ccc;
zoom: 1; /* 相容 IE6、IE7 */
}
