您的位置：首页 > Web前端 > CSS

css float清理clear方法

2013-11-10 23:22 246 查看
问题: 当一个容器内包含使用了float属性的元素时, float元素高度高于容器其他元素时会超过容器界限, 容器不会扩展来包裹float元素, 这将对界面布局造成影响, 例如

<!DOCTYPE html PUBLIC  >
<html>
<head>
<title>float</title>
<style>

#wrapper {
background: #EEEDD9;
border: 1px solid black;
}
#sidebar {
height: 200px;
float: left;
width: 40px;
border: 1px solid red;
}
#content {
background: #3399FF;
border: 1px solid black;
}
</style>

</head>
<body>

<div id="wrapper">
<div id="sidebar">我是一个浮动元素
</div>
<p>这里是普通流中的元素</p>
</div>

<p id="content">上面#wrapper不能包裹float的#sidebar, 占了我的地盘</p>

</body>
</html>


在firefox下显示为:



解决办法:

在容器最底部放置一个空<div>, <p> 等高度为0的元素, 为其设置clear样式,

<!DOCTYPE html PUBLIC  >
<html>
<head>
<title>float</title>
<style>

#wrapper {
background: #EEEDD9;
border: 1px solid black;
}
#sidebar {
height: 200px;
float: left;
width: 40px;
border: 1px solid red;
}
#content {
background: #3399FF;
border: 1px solid black;
}
.clear {
clear: left;
}
</style>

</head>
<body>

<div id="wrapper">
<div id="sidebar">我是一个浮动元素
</div>
<p>这里是普通流中的元素</p>
<div class="clear"></div> <!-- 设置了清理元素 -->
</div>

<p id="content">井水不犯河水</p>

</body>
</html>


显示正常如下:


个人认为这样做简单粗暴有效, 将问题解决在局部, 简单方便, 理论上的缺陷是添加了多余的标签, 这似乎有点学院派吹毛求疵了, 适当添加标签用于布局太普遍了

给容器设置float样式也可以达到这个效果, 但是这会使容器也浮动, 相当于把问题转移了, 后续总得有一个元素进行必要的清理, 有人把所有元素浮动了. 然后使用footer进行清理. 这样应该说让布局更难了, 如果容器没有设置高度(以前依赖于它的contain block), 现在宽度还得受内部元素影响, 如果你遇到了ie6之类的浏览器, 那简直就是灾难

<!DOCTYPE html PUBLIC  >
<html>
<head>
<title>float</title>
<style>

#wrapper {
background: #EEEDD9;
border: 1px solid black;
float: left;
}
#sidebar {
height: 200px;
float: left;
width: 40px;
border: 1px solid red;
}
#content {
background: #3399FF;
border: 1px solid black;
}
</style>

</head>
<body>

<div id="wrapper">
<div id="sidebar">我是一个浮动元素
</div>
<p>这里是普通流中的元素,#wrapper没有设置宽度, 宽度受影响</p>
</div> <!-- 我也浮动, 而且还得设置宽度 -->

<p id="content">城门失火殃及池鱼, 我不使用</p>

</body>
</html>


显示如图:


给容器设置属性： overflow:hidden, 这个方法书上说会对容器内position为absolute的元素产生影响，我没有试过具体什么影响，

最好的方法来了：

.clear:after {
content: ".";
display: block;
clear: both;
height: 0;
font-size: 0;
visibility: hidden;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航