一、清除浮动的目的。
1、当一个父元素的高度不写或为auto时,而且这个父元素内又有浮动的子元素,那么这时候该父元素的高度将不会自动适应子元素的高度,也可以说高度是0px;
有如下代码:
<div class="divp" style="width:300px; background:red; border:3px solid #000000;"> <div style="height:300px;float:left; background-color:Green">123123</div> </div>
此代码父元素高度不设置,而且里面又有左浮动高度为300px的子元素。实际显示效果为:
可以看到,父div仅仅显示为其边框的高度,并没有适应其子元素的高度,要正确显示父元素的边框的话,此时就要清除浮动。我们在原来的代码的基础上加多一个<br/>以用于清除浮动,实际代码如下:
<div class="divp" style="width:300px; background:red; border:3px solid #000000;"> <div style="height:300px;float:left; background-color:Green">123123</div> <br/ style="clear:both;" > //此行代码用于清除浮动 </div>
现在再来看看现在的效果:
注意:清除浮动的元素要放在正确的位置上,必须紧贴着浮动元素。
2、布局错位问题。
因为浮动元素脱离了标准文档流,因此其它非浮动元素可能会受此影响而错位。
例如有如下代码:
<div style="border:2px solid #000; width:320px;"> <div style="width:100px;height:100px;float:left; border:1px solod #555">左浮动元素</div> <div style="width:100px;height:100px;float:right; border:1px solod #AAA">右浮动元素</div> </div> <div>看看我的位置</div>
理论上说来,最下面的div与上面的div没有关系,因此会自动排到上面的div的下面一行。来看效果:
可以看到,效果不像预期,究其原因,还是上面的父div高度不适应子浮动元素而导致,高度仅仅为边框的高度,从而下面的div自动顶上去了,因此到此错位
我们来改写上面的代码如下所示:
<div style="border:2px solid #000; width:320px;"> <div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div> <div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div> <br style="clear:both;" /> </div> <div>看看我的位置</div>
上面的代码仅仅添加了一个<br/>元素用于清除浮动,来看最终效果。
看到效果已经正确了。
但是,如果清除浮动的元素的位置放置不正确会有什么后果呢?再来改写下面的代码:
<div style="border:2px solid #000; width:320px;"> <div style="width:100px;height:100px;float:left; border:1px solid #555555">左浮动元素</div> <div style="width:100px;height:100px;float:right; border:1px solid #AAAAAA">右浮动元素</div> </div> <br style="clear:both;" /> //稍稍调整了一下清除浮动的元素的位置 <div>看看我的位置</div> </body>
效果如下:
可以看到,虽然下面的div的位置正确了,但是上面的父元素还是没有适应子浮动元素的高度。
今天公司的前端发给了我一个清除浮动的解决方法列表,觉得挺好的,有的甚至见都未见过。整理如下:
1. float 缺点:层层往上找,没完没了,到了body那,算是个头 float 和 margin:0 auto; 有冲突 2. display:inline-block; 缺点:不能设置 margin:0 auto; 3. overflow:hidden; 缺点:很多JS交互特效做不了,多出去的部分隐藏了 4. 在父级内,加空DIV:clear:both; 缺点:父级不能加padding,否则IE6 IE7不兼容 5. <br clear="all" /> 缺点:每次都要加这个换行符 6. .clear:after { content: '\20'; clear: both; display: block; } 缺点:如果代码多了点,也叫缺点的话…… 此外,如果父级没有宽,就必须为父级加上:zoom:1;用来解决IE6 IE7下的问题