首页 > 代码库 > CSS清除浮动方法
CSS清除浮动方法
HTML结构
1 <div class="wrap"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 </div>
CSS样式
1 .wrap{margin:10px;padding20px;border:5px solid gray;background-color:#fff;} 2 .div1{float:left;height:100px;width:100px;background-color:lightgray;} 3 .div2{float:left;height:100px;width:100px;background-color:skyblue;} 4 .div3{float:left;height:100px;width:100px;background-color:red;}
可以看到外层wrap div的高度并没有撑起来,这是因为内层元素浮动脱离了文本流而导致的,这时我们就需要清除浮动。下面介绍清除浮动的三种常用方法。
1.在最后一个内层元素后面添加空元素,使用clear:both
1 <div class="wrap"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 <div class="clear"></div> 6 </div>
1 .clear{clear:both;}
2.给外层元素添加overflow:hidden或者auto属性。
1 .wrap{ 2 overflow:auto; 3 zoom:1;/*处理兼容性问题*/ 4 }
3.给外层元素添加伪元素after,利用after模拟创建元素div.clear。(推荐使用,可以作为公共样式)
1 <div class="wrap clearfix"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3">3</div> 5 </div>
1 .clearfix{ 2 zoom:1;/*处理ie兼容问题*/ 3 } 4 .clearfix:after{ 5 display:block; 6 visibility:hidden; 7 content:‘.‘; 8 clear:both; 9 height:0; 10 overflow:hidden; 11 }
CSS清除浮动方法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。