清除浮动
清除浮动的作用
为了解决父级元素因为子级元素浮动导致高度为0的问题,将浮动的盒子圈在内部,让父盒子闭合出口和入口,防止子元素影响其他元素。(准确地说,并不是清除浮动,而是清除浮动后造成的影响)
在CSS中,clear属性用于清除浮动
清除浮动的方法
- 额外标签法:在最后浮动的盒子后加div标签,如
<div class="clear"></div>
,并在css中赋予.clear{clear:both}
属性即可清除浮动。(清除浮动后,父盒子会自动检测子盒子的高度,比较简便但是结构性差)
- overflow法:给父盒子增加overflow属性,如
.father{overflow:hidden;}
(代码简单,但是内容较多时,溢出的内容会被隐藏)
- after伪元素法:给浮动元素的父盒子添加clearfix标签,
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;} /* IE6、7 专有 */
总结
以上较为常用的方法为overflow法与after伪元素法。
- 当父元素文本内容较多时,不建议用overflow,容易将重要的信息隐藏掉,因此,此方法更适合应用在一些小模块的内容中。
- 在网页布局中,after伪元素的应用频率较高,不但操作简便,而且可以使文档结构更清晰,强烈推荐此方法。
网友评论