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

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优点：简单，代码少，浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
评分：★★☆☆☆

5、父级div定义height

CSS Code复制内容到剪贴板

<style type="text/css">    

   .div1{background:#000080;border:1px solid red;/*解决代码*/height:200px;}   

   .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}   

   </style>    

<div class="div1">    

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

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

</div>   

<div class="div2">   

   div2   

   </div>   

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题
优点：代码简洁
缺点：高度被固定死了，只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
评分：★★☆☆☆

（编辑：焦作站长网）

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