前端BFC布局学习

2024年5月17日 125次阅读 来源: 天月

BFC，全称为(Block formatting context)。按照我的理解是我们在某一条件下会触发BFC布局，会产生一定的效果。

Block Formatting Contexts翻译为：块级元素格式化上下文。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互作用。

其中块级元素可以理解为父级元素，内容即是子元素，子元素也为块元素，其他元素指的是与内容同级别的兄弟元素，相互作用指的是BFC里的元素与外面的元素不会发生影响。

而触发BFC的条件是：

1、float的值不为none
2、overflow的值不为visible
3、display的值为table-cell、table-caption和inline-block之一
4、position的值不为static或者releative中任何一个

普通文档流的布局规则(一般像我这种新手没有布局意识的，就应该是普通文档流布局了。。。)

1、浮动的元素是不会被父级计算高度
2、非浮动元素会覆盖浮动元素的位置
3、margin会传递给父级
4、两个相邻的元素上下margin会重叠

BFC的布局规则

1、浮动的元素会被父级计算高度(父级触发了BFC)
2、非浮动元素不会覆盖浮动元素的位置（非浮动元素触发了BFC）
3、margin不会传递给父级（父级触发了BFC）
4、两个相邻的元素上下margin不会重叠（给其中一个元素添加一个单独的父级，然后让他的父级触发了BFC）

实例：

<!--html代码
BFC满足条件：display:inline-block;
所以会遵循BFC的布局规则，使得其浮动元素会被父级计算高度，从而也就避免了高度塌陷。
-->
<div style="border: 1px solid #f00; display: inline-block;">
    <div style="width: 100px; height: 100px; background: green; float: left;"></div>
</div>
 <!--
BFC满足条件：overflow:hidden；兄弟元素之间不会相互覆盖
-->
<div style="border: 1px solid #f00; margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; float: left;">hello1</div>
    <div style="width: 100px; height: 100px; background: red; overflow: hidden;">helloagain</div>
</div>
 <!--
    BFC满足条件：overflow:hidden；使得父级元素与子集元素margin不会重叠
-->
<div style="background: blue; margin-top: 100px; overflow: hidden;">
    <div style="width: 100px; height: 100px; background: green; margin-top: 100px;">hello1</div>
    <div style="width: 100px; height: 100px; background: red;">helloagain</div>
</div>

<!--
    BFC满足条件：overflow:hidden；使得父级元素与子集元素margin不会重叠，以及同级元素的margin不会重叠
-->
<div style="margin-top: 100px;">
    <div style="width: 100px; height: 100px; background: green; margin: 100px 0;">hello1</div>
    <div style="overflow: hidden;">
        <div style="width: 100px; height: 100px; background: red; margin: 100px 0;">helloagain</div>
    </div>
</div>
    原文作者：天月
    原文地址: https://segmentfault.com/a/1190000015651962
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞