自动清除浮动
在做网页时经常会碰到元素的自动清除浮动问题,现记下两种解决方法。设有网页元素如下:
<div class="container">
<div class="left">
左浮动元素<br />
左浮动元素<br />
左浮动元素<br />
左浮动元素<br />
左浮动元素<br />
左浮动元素<br />
左浮动元素<br />
</div>
<div class="right">
右浮动元素<br />
右浮动元素<br />
右浮动元素<br />
右浮动元素<br />
右浮动元素<br />
右浮动元素<br />
右浮动元素<br />
</div>
</div>
若要class值为“container”中的两个元素分别左右浮动,则需以下CSS代码:
div.container{
width:100%;
background:#ff9;
}
div.left{
width: 45%;
float: left;
}
div.right {
width: 45%;
float: right;
}
常用清除浮动的CSS代码如下: