前端面试 BFC

BFC(边距重叠解决方案)

渲染规则：

• 属于同一个BFC的 两个相邻Box的 上下margin会发生重叠
• BFC的区域不会与浮动的元素重叠
• BFC里面是一个独立的容器外面的元素不会影响里面的元素，里面的元素同样不会影响外面的
• 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC：

• float值补位none
• position的值不是static、relative
• display的值为table-cell、 table-caption 等
• overflow不为 visible

BFC使用场景：

高度坍塌：

原因是如果块元素的 margin-top 与它的第一个子元素的margin-top 之间没有 border、padding、inline content、 clearance 来分隔，或者块元素的 margin-bottom 与它的最后一个子元素的margin-bottom 之间没有 border、padding、inline content、height、min-height、 max-height 分隔，那么外边距会塌陷。子元素多余的外边距会被父元素的外边距截断。

防止垂直margin重叠：
父子元素的边界重叠得解决方案：
在父元素上加上overflow:hidden;使其成为BFC

兄弟元素的边界重叠，在第二个子元素创建一个BFC上下文

<section id="margin">
    <p>1</p>
    <div style="overflow:hidden;">
        <p>2</p>
    </div>
    <p>3</p>
</section>