快速理解BFC原理

最新推荐文章于 2019-09-19 13:43:32 发布

The_upside_of_down

最新推荐文章于 2019-09-19 13:43:32 发布

阅读量233

点赞数

文章标签： BFC

本文链接：https://blog.csdn.net/The_upside_of_down/article/details/100046747

版权

一、常见的定位方案

先了解一下常见的定位方式，常见的三种方案如下：

普通流（normal flow）

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动（float）

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位（absolutepositioning）

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

二、BFC概念

Formatting context（格式化上下文）是W3C CSS2.1规范中的一个概念。他是页面中的一块渲染区域，并且有一套渲染规则，他决定了其子元素将如何定位，以及和其它元素的关系和相互作用。

那么什么是BFC？

BFC（Block Formatting context）块级格式上下文，它属于上述定位方式中的普通流。

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。

通俗点说：可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何变化，都不会影响外部。

三、触发BFC

只要元素满足下面任意一条就可触发BFC特性：

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

四、BFC特性及应用

同一个BFC下外边距会发生折叠。

<body>
<div></div>
<div></div>
</body>

 div {
            width: 100px;
            height: 100px;
            background: darkorange;
            margin: 50px;
        }

从效果上看，两个div块元素都处于同一个BFC容器下（这里指body元素），所以第一个div的下边距和第二个div的上边距发生了重叠，所以两个盒子之间距离只有50px，而不是100px。

首先这不是css的bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的BFC容器中。

<body>
<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>
</body>

  .container {
            overflow: hidden;
        }
        p {
            width: 100px;
            height: 100px;
            background: darkorange;
            margin: 50px;
        }

BFC可以包含浮动的元素（清除浮动）。

众所周知，浮动元素会脱离普通文档流。

<div style="border: 1px solid black;">
    <div style="width: 100px;height: 100px;background: darkorange;float: left"></div>
</div>

因为容器元素浮动，脱离了文档流，所以容器只剩下2px的边距高度。如果触发容器的BFC，那么容器将会包裹浮动元素。

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

BFC可以阻止元素被浮动元素覆盖。

先看一个文字环绕效果：

从上图可以看出，第二个元素有部分被浮动元素所覆盖，如果避免元素被覆盖，可触发第二个元素的BFC特性加入overflow:hidden就行。

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee;overflow: hidden">我是一个没有设置浮动, 也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>