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

   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}   

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

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

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

   </style>    

<div class="div1">    

<div class="left">Left</div>    

<div class="right">Right</div>   

</div>   

<div class="div2">   

   div2   

   </div>   

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：不能和position配合使用，因为超出的尺寸的会被隐藏，无法显示需要溢出的元素
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
评分：★★★☆☆

4、父级div定义overflow:auto

CSS Code复制内容到剪贴板

<style type="text/css">    

   .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:auto}   

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

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

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

   </style>    

<div class="div1">    

<div class="left">Left</div>    

<div class="right">Right</div>   

</div>   

<div class="div2">   

   div2   

   </div>   

（编辑：焦作站长网）

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