css别忘记清除浮动clear:both
- 作者: 鵞奀昆勥
- 来源: 51数据库
- 2020-08-06
总结下清除浮动的一般解决方案,做网页时要注意
用空标签清除
.clr {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
使用 overflow 属性
#layout {overflow:auto; zoom:1;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
使用 :after （非 IE 浏览器）
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>注：使用 :after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空
.clr {clear: both;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
<p class="clr"></p>
</div>
使用 overflow 属性
#layout {overflow:auto; zoom:1;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
使用 :after （非 IE 浏览器）
#layout:after{
display: block;
clear: both; content: "";
visibility:hidden; height: 0;
}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>注：使用 :after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空
推荐阅读
