CSS去浮动与BFC

前言

记录下，后续再继续补充

CSS浮动造成的影响

float 属性会造成当前元素脱离文档流，使其父元素的高度造成坍塌。
也就是要去浮动的原因

常见的清除浮动的方法

1.利用clear样式
利用最好一个空元素添加clear:both 或者利用::after 添加clear:both
其实是一样的。
clear:both 样式意味着左右两边不允许存在浮动
那么当前元素就只能向下移动，而父元素又要包含该元素，从而撑起了高度。

2.利用BFC原理
利用overflow:auto 等解决 浮动问题

这个是利用了块格式化上下文（BFC）原理来实现的，

BFC的简单概念：
BFC是一个独立的布局环境，而不受外接环境影响，在计算高度时，内部的浮动元素的高度也会计算在其中（所以可以用于解决浮动问题）

下面的方式可以创建BFC（不是全部方法，全部方法请看这里）
1、float的值不是none。
2、position的值为absolute、fixed。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
5、display值为flow-root
6、根元素

参考
1.清除浮动的四种方式及其原理理解——ThinkMore