浮动和BFC

浮动，清除浮动；

• 说明： 浮动的元素脱离文档流，占用的空间会释放；

使用 clear: both 的意义：使清除浮动的元素左右两边都没有浮动元素，所以就使得它被迫在下一行显示了
方法：1. 使用伪元素    2. BFC

关于 BFC

• 说明：其实就是一个dom元素区域，在满足了某些条件后具备了某些特性；

特性：
1. 每一个BFC区域只包括其子元素，不包括其子元素的子元素；
2. 每一个BFC区域都是独立隔绝的,互不影响；


触发：
1. 定位：absoulte或者fixed
2. overflow：hidden，auto，scroll
3. flex

BFC能解决什么问题：（每一个BFC区域都是相互独立，互不影响的）

1. margin 重叠

<div class="demo"></div>
<div class="demo"></div>

// 中间的margin重叠了
.demo {
    height: 200px;
    width: 200px;
    margin: 100px;
    background-color: blueviolet;
}

// 利用 BFC 特性解决问题，让这俩div都处在一个BFC内，那么就会互不影响;
<div class="bfc">
    <div class="demo"></div>
</div>

<div class="bfc">
    <div class="demo"></div>
</div>
.bfc {
    overflow: hidden;
}

2. 包含塌陷

// 子的 marginTop 会把父容器拉下来；
// 解决：父盒子变成一个独立的区域，这样在BFC区域内部的任何操作，都不会影响到外部；

3. 解决浮动问题

// 问题：所有子元素浮动会让父盒子失去原有的高度；
// 利用BFC机制，父盒子将所有的浮动元素包裹起来；

4. 标准流元素被浮动元素覆盖

// 盒子触发了BFC之后，浮动元素就再也不能覆盖它了