高度塌陷BFC BFC解決高度塌陷
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
高度塌陷問題解決,且副作用最小,可以採用
定義：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
高度塌陷問題解決,且副作用最小,可以採用