<div class=\”div1 clearfloat\”>
<div>Left</div>
<div>Right</div>
</div>
<div>div2</div>
共同样式代码：
.div1{background:800080;border:1pxsolidred;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:DDD}
1.原理：添加一个空div，利用css提高的clear:both清除浮动 ， 让父级div能自动获取到高度
<div>
<div>Left</div>
<div>Right</div>
<div></div>
</div>
<div>div2</div>
/*清除浮动代码*/
.clearfloat{clear:both}
【清楚浮动的方法】2.原理：IE8以上和非IE浏览器才支持:after，zoom可解决ie6,ie7浮动问题
/*清除浮动代码*/
.clearfloat:after{display:block;clear:both;content:\”\”;visibility:hidden;height:0}
.clearfloat{zoom:1}
3.原理:父级div手动定义height，就解决了父级div无法自动获取到高度的问题（只建议高度固定的布局时使用）
.div1{background:000080;border:1px solid red;
/*解决代码*/width:98%;overflow:hidden}
5.原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
.div1{background:#000080;border:1px solid red;
/*解决代码*/width:98%;overflow:auto}
以上就是朝夕生活（www.30zx.com）关于“清楚浮动的方法”的详细内容，希望对大家有所帮助！

猜你喜欢

• IE常见故障及其解决方法有哪些？
• ie故障大全
• 居家办公时，网络断断续续掉线，怎么办？
• WiFi信号不稳定怎么解决？三招搞定，速戳！
• 手机Wi-Fi热点连不上？连上还不稳定？学会这招就行了
• 家里的wifi信号总是断断续续，这4种全屋wifi方案，你尝试过吗
• 亲测有效，四种改善网络的好方法
• 电脑中毒怎么办？不同中毒有不同的方法
• 15年前的“熊猫烧”香病毒：“毒王”李俊被抓捕，事件后续怎样？