Open ChuChencheng opened 4 years ago
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
满足以下条件之一即可:
BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
同一个 BFC 下的元素会产生外边距塌陷,只要元素属于不同的 BFC 就能防止塌陷:
<div> <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div> <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div> </div>
把其中一个 div 放入新创建的 BFC 中:
<div> <div style="overflow: hidden;"> <div style="width: 100px; height: 100px; border: 1px solid red; margin-bottom: 10px;"></div> </div> <div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"></div> </div>
根据 BFC 的特性, BFC 的高度是把内部浮动的元素也计算进去的,因此本来内部元素浮动导致高度塌陷的问题,就可以用创建 BFC 的方式解决:
<div style="border: 1px solid blue;"> <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"> </div>
让容器成为一个 BFC :
<div style="border: 1px solid blue; display: flow-root;"> <div style="width: 100px; height: 100px; border: 1px solid red; float: left;"></div style="width: 100px; height: 100px; border: 1px solid red; margin-top: 10px;"> </div>
<div style="overflow: hidden; border: 1px solid red;"> <div style="float: left; margin-right: 10px; width: 100px; height: 100px; border: 1px solid green;"> 侧边栏 </div> <div style="height: 100px; overflow: hidden; border: 1px solid blue;"> main </div> </div>
概念
创建 BFC 的条件
满足以下条件之一即可:
特性
应用
防止外边距塌陷
同一个 BFC 下的元素会产生外边距塌陷,只要元素属于不同的 BFC 就能防止塌陷:
把其中一个 div 放入新创建的 BFC 中:
清除浮动
根据 BFC 的特性, BFC 的高度是把内部浮动的元素也计算进去的,因此本来内部元素浮动导致高度塌陷的问题,就可以用创建 BFC 的方式解决:
让容器成为一个 BFC :
实现两栏布局
参考