CSS清除浮动的常用方法优缺点分析

一、抛一块问题砖（display： block）先看现象：

分析HTML代码结构：

XML/HTML Code复制内容到剪贴板

<span style="font-size: 15px;"><div class="outer">  

    <div class="div1">1</div>  

    <div class="div2">2</div>  

    <div class="div3">3</div>  

</div>  

</span>  　　

分析CSS代码样式：

CSS Code复制内容到剪贴板

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}   

.div1{width: 80px;height: 80px;background: red;float: left;}   

.div2{width: 80px;height: 80px;background: blue;float: left;}   

.div3{width: 80px;height: 80px;background: sienna;float: left;}   

这里没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：

（1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

解决办法如下（使用其他代码示例）：

1、父级div定义伪类:after和zoom

CSS Code复制内容到剪贴板

<style type="text/css">    

   .div1{background:#000080;border:1px solid red;}   

   .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}   

   .left{float:left;width:20%;height:200px;background:#DDD}   

   .rightright{float:rightright;width:30%;height:80px;background:#DDD}   

   /*清除浮动代码*/  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!