css之BFC原理

1、常见定位方案

普通流

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

浮动float

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

绝对定位

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

2、BFC概念

BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

3、触发BFC

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

4、BFC特性及应用

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

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

图片说明
两个div元素都处于同一个BFC容器下（body），所以第一个div的下边距和第二个div的上边距发生了重叠，两个盒子之间的距离只有100px。
如果想要避免外边距的重叠，可以将两个div放在不同的BFC容器中

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

css

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

overflow使其成为两个BFC
这时，两个盒子边距就变成了200px

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

已知：浮动的元素会脱离普通文档流

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

图片说明
由于浮动元素脱离了文档流，所以容器只剩下边距高度，如果触发容器的BFC，那么容器会包裹着浮动元素

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

图片说明

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

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

图片说明
此时第二个元素有部分被第一个元素覆盖，但是文本信息不会被浮动元素所覆盖。为了避免元素被覆盖，可以触发第二个元素的BFC特性，在第二个元素中加入overflow:hidden

这个方法可以用来实现两列自适应布局。