最简单的一种情形就是把一个小的、固定宽度的div元素和其他元素内容一起放在一个大的div中,比如下面:
我们可以为#inner设定一个宽度值20%,但是由于div是块级元素,即使设定了宽度,其后面的内容也只能在下一行中显示,除非给它设定一个浮动属性那么此时会产生上面提到的问题了。
如果#inner的宽度和高度都比#outer小,这不会有问题。
但是,如果#inner的高度超过了#outer,那么的底部就会超出#outer的底部。这是因为为#inner设定了float属性后,就会脱离的文本流,无论其宽度和高度怎么变化都不会使#outer跟随变化。
一、未清除浮动时的布局表现
在这个里面,最开始由于#inner的高度小于#outer所以不会有问题,但是当点击“加长”后会发现#inner的底边已经超出了#outer的范围,而#outer没有发生改变。这就是所提到的或者是闭合浮动问题
解决办法:
1、额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用:
二:使用空div闭合浮动元素
发现在Internet Explorer中<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题。
2、使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个点,因为它比较小不太引人注意。然后在利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
三、使用:after伪类清理浮动
如果你不考虑 IE6/Mac用户的话只需要写* html #outer {height:1%;}就可以了。
另外,似乎在ie7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
3、浮动外部元素,float-in-float
这种方法很简单,就是把#outer元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要注意。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
四、float-in-float
4、设置overflow为hidden或者auto
把#outer的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候要注意,因为会影响浏览器的表现。在ie6中设置overflow为hidden或者auto并不能有效清除浮动,还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
如果要在IE5/Mac上使用这种方法清除浮动的话,就必须设定overflow的属性为值为hidden。
比较
四种方法中使用哪种最好呢?首先,最好不要使用after伪类,对比其它三种方法,holly有点太烦琐,不好掌握,上面讲到的holly里面并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。
那么其它三种方法其实都可以的。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,最好是能在多个浏览器上测试的页面。
而对于使用额外标签清除浮动,是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的想用那个来选。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
float-in-float,也是一个很好的选择,把要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。
<div id="outer">
<div id="inner"> <h2>A Column</h2> </div>
<h1>Main Content</h1>
<p>Lorem ipsum</p>
</div>
我们可以为#inner设定一个宽度值20%,但是由于div是块级元素,即使设定了宽度,其后面的内容也只能在下一行中显示,除非给它设定一个浮动属性那么此时会产生上面提到的问题了。
如果#inner的宽度和高度都比#outer小,这不会有问题。
但是,如果#inner的高度超过了#outer,那么的底部就会超出#outer的底部。这是因为为#inner设定了float属性后,就会脱离的文本流,无论其宽度和高度怎么变化都不会使#outer跟随变化。
一、未清除浮动时的布局表现
在这个里面,最开始由于#inner的高度小于#outer所以不会有问题,但是当点击“加长”后会发现#inner的底边已经超出了#outer的范围,而#outer没有发生改变。这就是所提到的或者是闭合浮动问题
解决办法:
1、额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用:
<br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素把容器给弄开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
二:使用空div闭合浮动元素
发现在Internet Explorer中<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这个问题。
2、使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个点,因为它比较小不太引人注意。然后在利用它来清除浮动(闭合浮动元素),并隐藏这个内容:
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
三、使用:after伪类清理浮动
如果你不考虑 IE6/Mac用户的话只需要写* html #outer {height:1%;}就可以了。
另外,似乎在ie7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
3、浮动外部元素,float-in-float
这种方法很简单,就是把#outer元素也进行浮动(向左或者向右)。
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要注意。有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素进行清理浮动,这有助于减少不必要的标记,但是过多的浮动会增加布局的难度。
四、float-in-float
4、设置overflow为hidden或者auto
把#outer的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候要注意,因为会影响浏览器的表现。在ie6中设置overflow为hidden或者auto并不能有效清除浮动,还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高度:
#outer {
overflow:auto;
width:100%;
}
如果要在IE5/Mac上使用这种方法清除浮动的话,就必须设定overflow的属性为值为hidden。
比较
四种方法中使用哪种最好呢?首先,最好不要使用after伪类,对比其它三种方法,holly有点太烦琐,不好掌握,上面讲到的holly里面并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以又加上了inline-block等属性,也就是说这种方法存在更多的不确定性。
那么其它三种方法其实都可以的。
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,最好是能在多个浏览器上测试的页面。
而对于使用额外标签清除浮动,是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的想用那个来选。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空<div>比较合适。
float-in-float,也是一个很好的选择,把要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的变化。