每日分享！～ 三种方式清除浮动

三种方式清除浮动

为什么要清除浮动？ 浮动带来的什么问题？如何解决更方便呢？

如果父级元素没有设置高度，可以由子元素的高度撑起来，但是子元素一旦产生浮动！就会产生一个问题 高度塌陷 ，什么是高度塌陷，我想大家都已经很清除，剩下来的是如何解决它。

方式1 使用 clear:both

在浮动的元素后面加上一个div元素（或者其他元素） 给它添加一个类？ 类名随意把我就用 clear:both来代替了。

.clear {
           clear:both;
}

给新增div添加这个类名就可以解决高度塌陷问题。

注意。这个方式的缺陷是，添加无意义的元素，不易于代码维护，更重要的是影响ESO优化问题。

方式2 采用 overflow:hidden

直接给父级元素添加一个样式。overflow:hidden就可以解决。

虽然这个方式解决浮动非常的方便，但是在实际过程中，会带来一些问题，也就是会隐藏超过父级元素的内容。这个也不是我们想要的方式。

那么个介绍的最后一种方式。伪类清除浮动。

先直接上代码；

clear:{ zoom:1}
clear::afrer{
    display:block;
    content:"";
    height:0;
    visbility:hidden;
    clear:both;
}

推荐使用第三种方式，基本上没有缺点，当然除了代码比较复杂之外了。 对于第一个行，zoom:1是解决Ie的兼容问题。

（本节完！）