BFC还是要多实践才能有更多提体会。

生成BFC的条件

（MDN官方文档大概有十几条，这里只挑部分说）

  1. overflow:hidden
  2. display:inline-block、table、table-cell、flex
  3. float不为none（即浮动元素）
  4. position：absolute、fixed

常用场景：

1. 解决外边距的问题，但有一些不同的误区：

BFC中解决外边距重叠的问题，是将设置了margin的元素用div包起来，再向该div设置为BFC来解决。 如下关系：

	<p>aaaaaaaaaaaa</p>
	<div id="b">
        <p>bbbbbbbbbbbbbbb</p>
    </div>

  • 但是有一些特例：

    浮动元素、diaplay为inline-block、position为absolute绝对定位,仅有这三个可以解决直接兄弟元素的margin外边距重叠问题，如下关系：

    <div id="a">bbbbbbbbbbbbbbb</div>
    <div id="b">bbbbbbbbbbbbbbb</div>

2. 解决内部元素仅为浮动元素时，高度塌陷的问题：

	<div id="a">
        <div id="b">bbbbbbbbbbbbbbb</div>//这个为浮动元素，且只有浮动元素
    </div>
  • 如图： alt
  • 解决：设置a为BFC

3. 解决父元素位置偏移问题：

	<div id="a">
        <div id="b">bbbbbbbbbbbbbbb</div>//这个设置了margin
    </div>
  • 可以看到子元素设置的外边距穿透到了父元素上（不建议父元素使用border来区分，会有一些影响）

alt

  • 解决：设置a为BFC

alt

4. 解决前面的兄弟元素为浮动元素覆盖后续兄弟元素的问题，该特性可以弄自适应布局：

    <div id="b">bbbbbbbbbbb</div>//这个为浮动元素
    <div id="a">aaaaaaaaaaa</div>

alt

  • 解决：设置a为BFC（这里使用display: inline-block;）

alt

（这里使用display: flex;） alt

注意！！！!：仔细看重叠部分其实是有区别的，flex会重叠显示溢出，inline-block则会直接覆盖

待遗留问题：

设置positon为absolute、fixed时，会造成其他的一些问题：

  • 比如脱离文档流后会对其他的部分造成影响，比如绝对定位基于父元素置于顶部时就会和其他部分重叠，即使解决了内部高度塌陷的问题。
  • 比如相邻元素解决元素覆盖问题时，并不能仅通过设置positon为absolute等来解除浮动元素覆盖的问题，因为兄弟元素会直接覆盖到浮动元素上