CSS--清除浮动

weixin_34402408

于 2015-03-13 12:05:00 发布

阅读量53

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yizihan/p/4334738.html

本文介绍了清除HTML中浮动元素带来的布局问题的多种方法，包括使用clear:both、触发BFC(haslayout)以及利用clearfix技巧等，并对比了它们之间的优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 // 清除浮动带来的影响;
 2 
 3 // 方法一:元素后面添加clear:both;
 4 // 1.HTML block水平元素底部
 5     <div style="clear:both;"></div>
 6     // 不足:造成很多裸露的<div>标签;
 7 
 8 // 2.CSS after伪元素底部生成
 9     .clearfix:after {}
10     // 不足:after伪元素属性,IE6/IE7不识别;
11 
12 // 方法二:父元素BFC(IE8+)或haslayout(IE6/IE7);
13     float:left/right;
14     position:absolute/fixed;
15     overflow:hidden/scroll;(IE7)
16     display:inline-block/table-cell;(IE8+)
17     width/height/zoom:1;(IE6/IE7)    
18 
19 // 权衡之后的策略
20     .clearfix:after {content:""; display:block; height:0; overflow:hidden; clear:both;}
21     .clearfix {*zoom:1;}
22 
23 // 更好的方法
24     .clearfix:after {content:""; display:table; clear:both;}
25     .clearfix {*zoom:1;}