一、BFC概念
BFC的全称是块格式化上下文(Block Formatting Context,BFC)
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
这些只是常见的,当然还有很多别的。
二、举例应用
- 父元素包住子元素
当子元素为float时会脱离文档流,通过触发BFC父元素包住浮动子元素,让浮动内容和周围的内容等高。
<div class="parent">
<div class="son">子元素</div>
<div>我是内容</div>
</div>
.parent{
border:1px solid red;
overflow: auto;/* 触发BFC */
}
.son{
border:2px solid blue;
width:300px;
height:50px;
float:left;
}

- 相邻元素隔离
当兄弟元素为float时会脱离文档流,和其他兄弟元素重叠。通过触发BFC将兄弟元素隔离开。
<div class="parent">
<div class="son1">子元素</div>
<div class="son2">我是内容</div>
</div>
.son1{
border:1px solid blue;
width:300px;
height:50px;
float:left;
}
.son2{
border:3px solid black;
height:50px;
overflow: auto;/* 触发BFC */
}

三、奇技淫巧
使用display: flow-root
一个新的display属性的值,它可以创建无!副!作!用!的BFC。
网友评论