1. overfloat: hidden
css代码:
<style type="text/css">
#box {
border: 10px solid #616161;
overflow: hidden; /* overflow: hidden add to parent can clear float*/
}
#content {
float: right;
width: 600px;
height: 600px;
border: 5px solid #400000;
width: 600px;
}
</style>
HTML,div代码:
<div id="box">
<div id="content"></div>
</div>
2. clear: both
css代码:
<style type="text/css">
#box {
border: 10px solid #616161;
}
#content {
float: right;
width: 600px;
height: 600px;
border: 5px solid #400000;
width: 600px;
}
.clearb {
clear: both; /*clear: both add to the last sibling can clear float*/
}
</style>
HTML,div代码:
<div id="box">
<div id="content"></div>
<div class="clearb"></div>
</div>
本文详细介绍了两种常用的清除浮动的方法:使用overflow:hidden属性和clear:both属性。通过具体的CSS代码和HTML结构展示如何解决由浮动元素引起的布局问题。
2937

被折叠的 条评论
为什么被折叠?



