定位形式
BFC

1 定位形式

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

1.1 一般流/文档流

规定

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

1.2 浮动

规定

元素先依照一般流的地位呈现，而后依据浮动的方向尽可能向左或向右偏移
平移到容器边框，或者碰到另外一个浮动的元素
父容器得不到脱离一般一般流的子元素的高度
会将元素的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属性，革除浮动带来的影响

1.3 相对定位

规定

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

2 BFC

规定

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

2.1 触发BFC

根元素
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

2.2 作用

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

防止外边距重叠

<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;}