清除浮动的几种方法
浮动产生负作用
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;}
偏执的太偏执、
柔情只为你懂
迷南。
今天药忘吃喽~
小鱼儿
还没有评论，来说两句吧...