html清除父级元素的影响,清除浮动撑开父元素的两种方法

浮动，CSS定位属性，其特性在于让元素脱离文档流的同时又保留了一定的流动性(会影响文字排版，这也是float和absolute的最大区别)。

float的引用场景很多，特别是在ES6未被广泛运用之前，可以说是但凡听过CSS的人，都知道float布局。但是，当问及别人如何清除浮动时，很多人居然并不清楚，只是一些模棱两可的回答！“clear：both可以清除浮动”、“一直用的是clearfix”，问及具体实现却回答不清楚。故本文主要讲解能清楚浮动的两种方法及原理，明白其中原理是为了更好的记忆和更好的解决问题，而不是一味套用以前的、用百度的...

一、CSS的clear属性

最普遍的方法，clear属性指定一个元素是否可以在它之前(上一个)的浮动元素旁边。clear属性可用在浮动元素和非浮动元素，两种用法带来的效果也有略微的差别。本文只讨论用于非浮动元素， 也就是我们最常使用的清除浮动的方法...

用于浮动元素时：只会改变该浮动元素及其之后浮动元素的浮动位置，不会撑开父元素。

// 为父元素添加clearfix类名 | 实现：伪类 + display block + clear both

.clearfix::after {

content: '';

display: block;

clear: both;

}

// 浮动元素父元素末尾添加空元素 | 实现：block元素 + clear both

上述的两种方法经其实原理是一致的，都是在父元素的末尾添加一个block元素，并由于clear的特性，该block元素会定位在上一个float元素的下方，而父元素要容纳这个非浮动元素就必须被撑开！当然由于这是一个空元素，故看起来像是父元素被float元素撑开了。

要点： 非浮动block元素 + clear both

如果上一个浮动元素是float left，则clear left和clear both的效果一致，如果上一个浮动元素是float right，则clear left会继续向上寻找，直到找到上一个float left元素(只限于兄弟元素)。right同理。

二、 CSS的overflow属性

overflow属性会触发

所以，给父级元素设置overflow属性，同样是可以打到清除浮动的效果。

Demo

float也能触发BFC，故父元素设置float也能打到清除浮动的效果，但不要忘记要同时设置width哦(因为float虽然会把元素转为块级元素，但并不会和默认块级元素一样自带width 100%这样的隐藏属性)，不过为父级元素添加float只为清除浮动，是很不合理的，不推荐！