关于css:css块格式化上下文BFC

定位形式
BFC

一般流 / 文档流
浮动
相对定位

规定

元素依照其在 HTML 中的先后地位自上而下布局
行内元素程度排列，直到当行被占满而后换行，块级元素则会被渲染为残缺的一个新行
所有元素默认都是一般流定位

规定

元素先依照一般流的地位呈现，而后依据浮动的方向尽可能向左或向右偏移
平移到容器边框，或者碰到另外一个浮动的元素
父容器得不到脱离一般一般流的子元素的高度
会将元素的 display 属性变更为 block
浮动前的元素：

block: 无影响
inline：浮动位于之前
inline-block：浮动位于之前
浮动后的元素：

block：笼罩，浮动在上
inline: 紧跟浮动元素
inline-block：紧跟浮动元素
重叠时

block：浮动在上，块内容盘绕浮动元素
inline：浮动在下
inline-block：浮动在下

革除浮动

应用 clear 属性

// 在父级后加一个空块
.clear {clear:both}
// 应用伪元素加空块
.parent::after {
  content: "";
  display: block;
  clear: both;
}

BFC
```
.parent {overflow:hidden;}
```
下面次要针对父级高度塌陷
能够对浮动周边元素增加 clear 属性，革除浮动带来的影响

规定

元素会整体脱离一般流，不会对其兄弟元素造成影响

规定

属于一般流，能够视为一块渲染区域或者元素的一个属性 – 隔离的独立容器，不会影响其余元素
浮动元素的高度也参加计算

根元素
float：不为 none
position：absolute、fixed
display：inline-block、inline-table、inline-flex、inline-grid、flex、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、flow-root
overflow：不为 visible 的块元素
contain：layout、content、paint
多列容器 column-count、column-width 不为 auto

防止外边距重叠
革除浮动
阻止元素被浮动元素笼罩

防止外边距重叠

<div class="item"></div>
<div class="item"></div>

.item {
    width: 300px;
    height: 100px;
    margin: 100px;
    background-color: aquamarine;
}

两个元素外边距都是 100px，高低间距应该是 200px，后果为 100px，上下边距产生了重叠，

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

.item {
    width: 300px;
    height: 100px;
    margin: 100px;
    background-color: aquamarine;
}
.container {overflow: hidden;}

在两个元素别离包上一个 container，触发 BFC，BFC 高低不会产生边距重合

革除浮动
下面曾经介绍，解决父级高度塌陷的问题

阻止浮动元素笼罩
后面介绍了，浮动元素前面的块级元素会被浮动元素笼罩
能够让这个块级元素触发 BFC，增加 overflow：hidden

<div class="item1"></div>
<div class="item2"></div>

.item1 {
    width: 100px;
    height: 100px;
    float: left;
    background-color: aquamarine;
}
.item2 {
    width: 300px;
    height: 300px;
    background-color: #dede;
}

.item2 {
    width: 300px;
    height: 300px;
    background-color: #dede;
    overflow: hidden;
}

关于css:css块格式化上下文BFC

1 定位形式

1.1 一般流 / 文档流

1.2 浮动

1.3 相对定位

2 BFC

2.1 触发 BFC

2.2 作用