理解float中的一些知识点

float元素会脱离block的文档流，不会脱离inline的文档流（包含inline-block）
inline-block与inline元素共占一行inline
float会导致父元素高度塌陷，因此在父元素最后添加一个一个div或者after伪类的  clear：both可以找回父元素丢失的高度
clear：both清除浮动会清掉元素两侧所有的浮动，不论这些浮动的元素是不是属于同一个div（这会造成清浮动的块与最高浮动元素块的高度一致，可见文1最后）。要解决这个问题需要给清浮动的块形成BFC模型，

BFC模型中子元素的浮动只会影响到BFC模型本身。
形成BFC模型的方法：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC作用：

bfc可以阻止相邻元素的margin重叠
左右自适应布局，
上面的清除浮动作用

 

 

引伸阅读
文1：https://blog.csdn.net/qq_22855325/article/details/78015502
文2：https://blog.csdn.net/sinat_36422236/article/details/88763187