一 、 给浮动元素的父级加高度;
分析:一般情况下,父元素的高度是由子元素来撑开,但由于子元素设置了浮动,所以会脱离文档流,父元素的高度为0,给父元素加高度,高度需要大于浮动子元素的最大高度。否则,会出现父元素包不住子元素的情况。具体效果,给父元素和子元素分别加背景色便可以看到。这里就不贴代码了。我本人并不支持这种方式,有“作假”嫌疑。
二、在浮动元素下加空标签<div class="clear"></div> ;
样式为.clear{content=""; display="block" clear:both;}
分析:这个方式可实现传统意义上的清浮动,但会造成多余的html标签,在注重提高页面性能的前进方向上,会渐渐淘汰这种写法。
三、直接给浮动父元素加 clear 样式;
样式为:.clear:after{content=""; display="block"; clear:both;}
分析:这种方式是我过去最喜欢的一种写法,既可以减少不必要的代码,也可以有效清除浮动,也比较符合W3C的语义化,但需要写clear样式。
四、给浮动父元素加浮动;
分析:采用这种方式的话,需要给父元素后 所有的容器都加浮动。否则当父元素已脱离文档流,而后面的元素却从文档最开始排列,造成后面元素被当前父元素遮挡的状况。有一些原始页面采用这种方式布局。
五、在浮动元素下 加<br clear="all"/>
分析:br本身就具有清浮动的属性,使用这个方式也可以有效清除浮动。
六、给浮动父元素加 overflow:hidden;
分析:这是我最近特别喜欢的写法,既可以实现清浮动,又可以减少多余标签带来的代码冗余。
七、给浮动父元素加 overflow:auto;
分析:这种写法与上述写法 大同小异,但如果需要父元素出现滚动条的情况,采用这个方式可以一举两得。推荐使用。
八、给浮动父元素加绝对定位 position:absolute;
分析:绝对定位的本质也是脱离文档流,对元素进行定位。与第二种方法类似,好处是,父元素需要绝对定位时,采用这个方式可以同时实现清浮动。
九、给浮动父元素加固定定位 position:fixed;
分析:与上述方式大同小异,需要根据具体情况使用。
十、给浮动父元素加 display:table;
分析:什么鬼,我也不造。总之这种方法也能实现就对了。哈哈哈。
End: 有落掉的,欢迎评论补充!