您的位置：首页 > 其它

清除浮动

2015-09-05 17:24 323 查看

两种清除浮动方法：

1.p{clear:both/left/right;}

适应范围：紧邻的块级元素

<span style="font-size:14px;"><html>
<head>
<style type="text/css">
#style0{
width:300px;
}
#style1{
background:#FF0000;
float:right;          /*设置浮动向右*/
}
#style2{
background:#00FF00;
clear:both;          /*清除块1对块2的右浮影响*/

}
</style>
</head>

<body>
<div id="style0">
<div id="style1">块1：how are you</div>
<div id="style2">块2：i am fine</div>
</div>
</body>

</html></span>

清除前：

清除后：

2、p{width:100%（或设置定宽）;overflow:hidden;}

适应范围：块级元素嵌套块级元素

width设置为100%就是继承父容器的宽度。左右撑满整个容器，为自己清除浮动创建条件。再加溢出隐藏，就可以把包裹浮动的部分去除。

<span style="font-size:14px;">#style0{
background:#000000;
width:300px;		/*父级容器不会显示黑色*/
}
#style1{
background:#FF0000;
}
#style2{
background:#00FF00;
float:left;          /*设置块二左浮*/

}</span>

<span style="font-size:14px;">#style0{
background:#000000;
width:300px;
overflow:hidden; /*父级容器会显示黑色*/

}</span>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航