BFC总结

BFC概念：块格式化上下文，BFC是一个独立的布局环境。内部元素不会受外部影响

创建条件：

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex等；
• overflow 值为：hidden、auto、scroll；

特点：

• 垂直方向上，自上而下排列，和文档流的排列方式一致。
• 两个容器BFC的margin不会重叠
• 计算BFC的高度时，需要计算浮动元素的高度
• BFC区域不会与浮动的容器发生重叠
• BFC是独立的容器，容器内部元素不会影响外部元素
• 每个元素的左margin值和容器的左border相接触

BFC的作用：

• 解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。

• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。

• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

  扩展：两栏布局和三栏布局实现，传送门

每日一更，如果对你有帮助，帮忙点个小👍哈