怎么理解BFC，顺便说说清除浮动

基础理论-W3C-css

至今还记得面试今日头条实习的时候，面试官问我如何清除浮动，我说：“……巴拉巴拉……第N种方法，可以给父元素加一个overflow:hidden触发一个BFC……“

然后面试官紧接着问我啥是BFC……其实我那个时候还不懂……

于是果断恶补一下BFC/顺便说说清除浮动的几种方式

BFC，即block formatting context，也叫块级格式化上下文，是文档里的一个渲染区域，定义了这个区域里的元素以一种什么样的方式进行排列布局，以及这个区域与临近的元素是怎样的关系。

如何设置BFC

  • html会生成一个BFC

  • overflow不为visible

  • position不为static relative

  • float不为none

  • display为inline-block table-cell table-caption flex inline-flex

BFC内部布局规则

  • BFC内的子元素从上到下顺序排列

  • BFC内子元素的margin-left和包含块的border-left相接触（从右往左排列则相反）

In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
在BFC中，每个盒子的左外边框紧挨着包含块的左边框（从右到左的格式，则为紧挨右边框）。即使存在浮动也是这样的（尽管一个盒子的边框会由于浮动而收缩），除非这个盒子的内部创建了一个新的BFC浮动，盒子本身将会变得更窄）。

  • BFC内的浮动元素会参与包含块的高度计算（所以就是这么用来清除浮动的）

  • BFC不会与同级的浮动元素重叠

  • BFC内的子元素的上下margin会发生重叠（关于外边框塌陷，MDN的文档描述可以看这里

  • BFC是一个独立的渲染区域，容器里面的子元素不会影响到外面的元素

BFC与清除浮动

清除浮动用得比较多的方法有下面的1和2两种，其实其他的方法都跟BFC有关

  1. 在浮动元素后面手动添加一个块级元素（太麻烦了）

  2. 使用::before ::after来设置一个类清除浮动

    1
    2
    3
    4
    5
    6
    7
    8
    .clearfix::after {
        content:",";
        display:block;
        height:0;
        clear:both;
        overflow:hidden;
        visibility:hidden;
    }

  3. 包含块设置BFC

原理：BFC中浮动元素也参与高度计算

  • overflow: hidden
  • 设置浮动
  • 设置绝对定位或者视窗固定

BFC与图文混排

浮动元素脱离文档流是”半脱离“，如果旁边有个元素没有浮动或者设置清除浮动，这个元素里地文字会移动，但是box本身不动。说不太明白，看看这个

See the Pen BjwGgw by ConanTvos (@lcc19941214) on CodePen.

第一次用codepen，见笑了

原理：BFC不与浮动元素重叠

然后，使用BFC就可以巧妙的避开这一问题

BFC与多列自适应布局

和上面的一样，就是利用BFC不与浮动元素重叠这一原理

BFC内部子元素的margin重叠

原理：同一个BFC内的兄弟元素的上下margin重叠

所以给两个兄弟元素设置一个包含块并设置BFC即可，因为这就不是一个BFC了嘛 XD

外边框塌陷

可以看看另一篇日志外边距塌陷是什么