css高度塌陷问题-凯发k8官方网

对于一个元素来说，如果他设置了浮动，则就会转化为块元素类型，可以设置width，height等。但是浮动会使元素脱离正常文档流，如果浮动元素的高度大于父元素的高度，则会使得浮动元素脱离父元素，也就是我们常说的高度塌陷。

在css中，常见的清除浮动有三种方法：

（1）clear：both

这种方法应用于浮动元素后面的元素，常常配合一个div元素来使用，这种方法会导致有一些没有任何语义的标签大量出现

（2）overflow：hidden

这种方法应用于浮动元素的父元素中，而不是当前浮动元素，虽然这种方法不会产生没有语义的标签，但是overflow：hidden则可能会隐藏子元素中多出的部分，一旦父元素设置的大小不足以容纳我们的子元素，这颗隐藏的炸弹就会爆炸

（3）：：after

这是我们实际开发中最常用到的凯发k8官方网的解决方案

语法：

.clearfix{*zoom:1;}/*用于解决ie6，ie7浮动问题*/ .clearfix::after{ clear:both; content:""; /*这里可以填写任意的内容，使用这个属性只是因为：：after伪元素需要配合这个属性才能发挥作用*/ display:block; height:0; /*这里写成line-height也是可以的*/ visibility:hidden; /*可见度为隐藏，仍然占据空间，与display：none有区别*/ }

　　说明：对于这个方法，我们常常会定义为公共类，然后在浮动元素的父元素中引用

转载于:https://www.cnblogs.com/runhua/p/6426534.html

总结

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

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