浮动产生负作用
1.背景颜色不能使用
子元素float ，如果父元素设置了background，而父级不能被撑开，所以导致背景颜色不能显示
2.边框不能撑开
如果父级设置的border,子元素float ，父级不能撑开，导致边框不能随内容而撑开
3.margin 、 padding 设置值不能正常显示
<style>
.box{margin: 50px auto;border:1px solid #ccc;background: #fc9;color:#fff;}
.red{width: 80px;height: 100px;background: red;float:left;}
.sienna{width: 80px;height: 100px;background: sienna;float:left;}
.blue{width: 80px;height: 100px;background: blue;float:left;}
</style><body>
<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>解决方法
子元素都设置了float ， 父元素高度不能被撑开，样式margin显示有问题
方法一
在子元素下放个标签，在这个标签中使用 clear：both ，来清除浮动
注 ：一般不推荐使用，使用这种添加标签清除浮动，会使页面结构混乱
.clear{clear: both;}<div class="box">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
<div class="clear"></div>
</div>方法二
给父元素添加属性 overflow：auto
.over-flow{ overflow: auto; zoom: 1;}/*zoom1; 是在处理兼容性问题*/<body>
<div class="box over-flow">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>方法三
使用伪元素清除浮动
推荐使用这一种方法
.clearfix::after{
content:"";/*设置内容为空*/
height:0;/*高度为0*/
line-height:0;/*行高为0*/
display:block;/*将文本转为块级元素*/
visibility:hidden;/*将元素隐藏*/
clear:both;/*清除浮动*/
}
.clearfix{
zoom:1;/*为了兼容IE*/
}<body>
<div class="box clearfix">
<div class="red">1</div>
<div class="sienna">2</div>
<div class="blue">3</div>
</div>
</body>方法四
使用双伪元素
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
扫一扫
5030
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
