在css中,当我们对元素进行float浮动时就需要清除浮动,因为当元素进行浮动时,元素就会脱离文档流;并且在css中任何元素都可以浮动,浮动元素会生成一个块级框,而不论它本身是何种元素。
分析HTML代码结构:
1
2
3
分析CSS代码样式:
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.p1{width: 80px;height: 80px;background: red;float: left;}.p2{width: 80px;height: 80px;background: blue;float: left;}.p3{width: 80px;height: 80px;background: sienna;float: left;}
HTML:
1
2
3
CSS:
.clear{clear:both; height: 0; line-height: 0; font-size: 0}
效果:
方法二:父级p定义 overflow: auto(注意:是父级p也就是这里的 p.outer)
HTML:
//这里添加了一个class
1
2
3
CSS:
.over-flow{ overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题 }
效果图同上。
原理:使用overflow属性来清除浮动有一点需要注意,overflow属性共有三个属性值:hidden,auto,visible。我们可以使用hiddent和auto值来清除浮动,但切记不能使用visible值,如果使用这个值将无法达到清除浮动效果,其他两个值都可以。
【补充】:
使用overflow属性
此方法有效地解决了通过空标签元素清除浮动而不得不增加无意代码的弊端。使用该方法是只需在需要清除浮动的元素中定义CSS属性:overflow:auto,即可。 overflow:auto;是让高度自适应,zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决,注意,zoom不符合W3C标准。overflow:hidden也可以实现。overflow:hidden也可以实现。
以上就是css什么时候清除浮动的详细内容,更多请关注其它相关文章!