BFC（Block Formatting Context）：块级元素所在布局（即上下文环境）。
个人认为codewhy老师讲解非常清楚，链接在这coderwhy面试题-01_CSS的BFC详细、权威、深入解析
1.可以形成一个BFC条件（不全）：
<html>根元素
float浮动
absolute
table-cell
flex
overflow：不为visible
2.BFC作用
1）在文档流中使得box可以在垂直方向上一个接一个的排布
2）BFC会解析box的间距（比如margin值）
3）同一个BFC中 box之间设置多个margin值的时候会折叠
4）box的左边缘会紧挨着Block的左边缘
3. 解决margin折叠：
原理是让两个紧挨的box不在同一个BFC中，这样就不会自动折叠（给其中一个元素包裹一个父元素，父元素形成一个BFC）
4.解决浮动高度塌陷
条件：a.浮动元素的父元素形成BFC（absolute不行） b.父元素的height: auto (即BFC的高度为auto);
原理是在BFC高度为auto时，是这样计算高度的：
1）如果内部只有inline-level时，计算的是行顶部到底部的高度
2）如果有block-level，计算的是盒子上边缘到下边缘的高度
3）如果是absolute，会忽略
4）如果内部是浮动元素，会增加高度以包括float元素的下边缘
扫一扫
891
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
