css清除浮动的几种方法-凯发k8官方网

为什么要清除浮动

虽然说现在 9102 年了应该不会再有人用 float 了，但是有些老网页还是会有 float 来布局的。float 带来的主要问题是高度坍塌。如：

在子元素设置了 float 后，父元素的高度就没了。

.parent {border: 1px solid green; }.children {float: left;height: 100px;width: 100px;border: 1px solid red; }

结果：

主要的原因是因为设置了 float 之后，子元素就脱离文档流，也就相当于浮在父元素上了，从二维变到了三维。父元素里面就中空了，高度也为0了，不再是子元素高度。

解决方法一般有两个。

overflow

最简单但是会带有副作用的方法是在父元素上添加一个 overflow:hidden 就可以了。

.parent {overflow: hidden;border: 1px solid green; }.children {float: left;height: 100px;width: 100px;border: 1px solid red; }

结果：

但是如果代码多了，每个地方都要加这一句很麻烦，而且有可能父元素 oveflow:hidden 和别的样式冲突就麻烦了。

clearfix

我们可以使用另一个方法，也是推荐的方法。首先定义一个 .clearfix 的类

.clearfix::after{content: ''; display: block; clear:both;}.clearfix{zoom: 1; /* ie 兼容 */}

然后将这个类添加到父元素上就可以了。

这样的副作用基本是没有的，而且只需要在父元素上添加 class 类就好了，更方便。

总结

以上是凯发k8官方网为你收集整理的css清除浮动的几种方法_css--清除浮动的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。