BFC

介绍

BFC（Block Formatting Context)， 他是一种机制，形成一个独立的盒子，内部样式不会被外部影响，外部也不会影响到内容。

典型问题

非BFC时样式出现三种典型问题的情况：

1. 同一个 BFC 下外边距会发生折叠 即两个div , margin重叠

解决：将两个div放在不同的BFC中

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
.container {
    overflow: hidden;
}

2. 内部子元素，设置float脱离文档流，外面父元素高度塌陷

image.png

解决： 父元素设置 overflow:hidden

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

3. BFC 可以阻止元素被浮动元素覆盖 （左侧固定宽且浮动，右侧自适应且包裹左侧）

image.png

解决： 父元素设置 overflow:hidden

形成BFC途径

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