清除浮动的方法有哪些？

1.浮动元素脱离普通文档流： 当一个元素设置 float(浮动)的时候就会脱离原本的文本流，后面的元素就会忽视它的存在，于是在标准浏览器中它们就会发生重叠。

2.解决方案：

2.1在需要清除浮动的父级元素内部的所有浮动元素后添加一个标签清楚浮动，并为其定义CSS代码：clear:both。此方法的弊端在于增加了无意义的结构元素。

<style type=”text/css”> 
<!– 
    *{margin:0;padding:0;} 
    body{font:36px bold; color:#F00; text-align:center;} 
    #layout{background:#FF9;} 
    #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;} 
    #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} 
    .clr{clear:both;}                   //清除浮动
–> 
</style> 
<div id=”layout”> 
    <div id=”left”>Left</div> 
    <div id=”right”>Right</div>  
    <!--   清除浮动   -->
    <div class=”clr”></div> 
</div

2.2 使用 overflow ：auto  |   hidden清除浮动

　　假如现在有一个背景层，该层要包含两个子层，这两个子层都是浮动层（也就是说它们都设置了float属性）背景层只设置宽度，不设置高度，此时如果不设置背景层的Overflow属性，那么将不会显示背景层。

　　如果应用了Overflow(auto或hidden)的元素，将会清除子层的浮动，将两个子层包含到自己之内，就是说背景层将会扩展到它需要的大小以包围它里面的浮动的子元素

<!--  使用overflow： auto  |  hidden 清除浮动-->
<div id="layer1" style="width:500px; background-color:#99CC00; overflow:hidden;">   
    <div id="sonLayer1" style="width:100px; height:100px; float:left; background-color:#999999;"></div>
    <div id="sonLayer2" style="width:100px; height:100px; float:right; background-color:#6666FF;"> </div>
</div>

 

转载于:https://www.cnblogs.com/duduSunny/p/4120258.html