为什么要清除浮动

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么要清除浮动相关的知识,希望对你有一定的参考价值。

父元素的高度是由子元素撑开的,且子元素设置了浮动,父元素没有设置浮动,子元素脱离了标准的文档流,那么父元素的高度会将其忽略,如果不清除浮动,父元素会出现高度不够,那样如果设置border或者background都得不到正确的解析。

清除浮动的方法:

1、给浮动元素父级加overflow:auto;在IE6中需要加上zoom:1

2、使用:after伪元素

.clearfix:after{
   content:"";
   dispaly:block;
   height:0;
   clear:both;
   visibility:hidden;
}
.clearfix{
   zoom:1;
}
或是:
.clearfix:after,.clearfix:before{
   content:"";
   display:table;
}
.clearfix:after{
   clear:both;
}

以上是关于为什么要清除浮动的主要内容,如果未能解决你的问题,请参考以下文章

清除浮动的四种方式及其原理理解

为什么要清除浮动

清除浮动专题

清除浮动的集中方式

关于浮动与清除浮动

清除浮动的几种方法