面试资料积累css-清除浮动

清除浮动可以理解为清除浮动所产生的影响。当元素浮动时也就是为当前的元素创建了块格式化上下文，简称BFC.会对周围的元素或者 父元素在布局上产生一定的影响。比如父元素因无法自动计算高度而产生的高度塌陷，也就是常见的子元素溢出父元素。或者因脱离文档流而使兄弟元素错位等。
要清除浮动产生的影响，其实就是在解决这两方面的问题。方法就是可以设计 父元素高度，利用BFC, 使用自带属性clear进行清除。
方法一：

设置父元素的高度
设置父元素的高度主要解决的就是其塌陷的问题，其内部元素浮动影响并未彻底清除，
且需要进行计算然后再设置，比较固定，一但子元素的高度发生变化 ，
父元素的高度也需要再次重新计算设置，不够灵活。除非内容高度固定一成不变，否则不推荐使用。

方法二：

自带属性clear:clear+空元素， 伪元素 + clear
clear+空元素：在浮动元素下方添加空div， 
并为其添加样式 ：{clear:both;height:0;overflow:hidden;}
伪元素+clear:使用自带属性可以非常好的解决浮动影响。该方法直观有效，
哪里需要清除就在哪里添加一个兄弟元素，设置clear属性即可。
一般属性值都设置为both清除两侧的浮动，也可以根据实际需要清除左侧或右侧，灵活方法直观.
.clearfix::after{display:block;clear:both;content:""}
该方法是在元素内部清除兄弟元素的浮动影响是比较推崇的。因为其灵活有效，想清哪里清哪里。
说这个方法有什么不好的地方，就是需要添加或者新建 一个节点。为新节点添加clear属性。
也就是我们需要 一个存放 clear 属性的盒子。来纠正在他之前兄弟产生的不良影响。

方法三：

利用BFC
BFC:块格式化上下文
根据bfc的规则，计算bfc的高度时，浮动元素也参与计算。因此清除浮动，只需要触发一个bfc即可。
实际使用中常写的有：
display:inline-block;
display:table;
overflow:hidden;不为visible的块元素
float:left/right;
position:absolute/realtive;
该方法是需要把属性添加到父元素当中的。以解决内部元素浮动影响。不能用于解决兄弟元素的浮动问题。