1.对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,一般设置高度需要能确定内容高度才能设置。
缺点:高度固定不可变,不够灵活
2.clear:both清除浮动
为了统一样式,我们新建一个样式选择器CSS命名为“.clear”,并且对应选择器样式为“clear:both”,然后我们在父级“”结束前加此div引入“class="clear"”样式。这样即可清除浮动。
3.伪类:after控制(最佳)
需要注意的是:after是伪元素,不是伪类,很多清除浮动大全之类的文章都称之为伪类,由于IE6-7不支持:after,使用zoom:1触发hasLayout。(.div指父级元素)
.div{zoom:1;}
.div:after {
Content:””;
Diaplay:block;
Clear:both;
}
4.父级div定义overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以用很少的CSS代码即可解决浮动产生。
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素;