css float 解析学习

2020-05-12 07:32:12易采站长站整理

·IE6,IE7 中,底边距 bug是当浮动父元素有浮动子元素时,这些子元素的底边距会被父元素忽略掉。如下图

19 firefox

20 IE6、IE7

代码:

<div class="box2">

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

<div class="box2_1"> margin-bottom:10px; float:left;</div>

</div>

解决IE6,IE7 中,底边距 bug:用父元素的底内补白(padding)代替。如下图

21 firefox、IE7、IE8、IE6

代码:

<div class="box2 padbot">

<div class="box2_2">float:left;</div>

<div class="box2_2">float:left;</div>

<div class="box2_2"> float:left;</div>

<div class="box2_2">float:left;</div>

</div>

这个方法的缺点是不能换行,如果想要换行的话,建议将浮动父元素的浮动子元素设置padding值。