BFC解決高度塌陷
定義：BFC（Block Formatting Context）全稱是塊級格式化上下文，用于對塊級元素排版，預設情況下隻有根元素（body）一個塊級上下文，但是如果一個塊級元素設定了float:left,overflow:hidden或position:absolute樣式，就會為這個塊級元素生産一個獨立的塊級上下文，使這個塊級元素内部的排版完全獨立。
作用：獨立的塊級上下文可以包裹浮動流，全部浮動子元素也不會引起容器高度塌陷，就是說包含塊會把浮動元素的高度也計算在内，是以就不用清除浮動來撐起包含塊的高度。
隐藏屬性BFC預設為關閉的,開啟元素的BFC後,元素将有如下特性:
1.父元素的垂直外邊距不會和子元素的重疊
2.開啟BFC的元素不會被浮動元素覆寫
3.開啟BFC的元素可以包含浮動的子元素
開啟BFC的方式:
1:設定元素浮動
2.設定元素的絕對定位
3.通過display設定為inline-block
4.設定overflow為非預設值visable的任意值,hidden的副作用最小(較常用)
<style type="text/css">
.box1 {
border: #5F9EA0 solid 5px;
}.box2 {
width: 200px;
height: 200px;
background-color: yellow;
}.box3 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
<div class="box1"> <div class="box2"></div>
</div>
<div class="box3"></div> 沒有發生高度塌陷的樣式:
為box2設定
float:left
後,高度塌陷:
一、為box1設定
float:left
高度雖然不塌陷,可以撐開父元素,但父元素的寬度部分丢失,且其下面的兄弟元素box3向上移動,不可以解決問題.不可取
二、為父元素box1設定 display: inline-block;
這種方式雖然可以撐開父元素,但仍>然會造成父元素寬度的丢失,可以解決問題,但不可取
三、為父元素box1設定overflow:hidden
高度塌陷問題解決,且副作用最小,可以采用