清除浮动的方法

摘要

在弹性布局还没有出现之前,元素浮动是我们经常用到的一种布局方式。因为浮动可以让元素脱离文档流,基于这个特性,我们可以制作出一些个性化的布局。

万物都具有两面性,浮动的好处的是使元素脱离文档流,弊处便是会影响父级高度。因此,在使用浮动之后我们应该及时清除浮动。

在弹性布局还没有出现之前,元素浮动是我们经常用到的一种布局方式。因为浮动可以让元素脱离文档流,基于这个特性,我们可以制作出一些个性化的布局。

万物都具有两面性,浮动的好处的是使元素脱离文档流,弊处便是会影响父级高度。因此,在使用浮动之后我们应该及时清除浮动

对于清除浮动的方法,前辈们已经总结了很多实用的技巧。有些技巧是有针对性的,另一些则是具有通用性的。

1、给浮动元素父级加足够的高度;

2、给浮动元素父级加浮动;

3、给浮动元素父级加position: absolute;

4、给浮动元素父级加display: inline-block;

注:这时候IE6、7支持块元素标签的inline-block

5、给浮动元素父级加overflow: hidden/auto;和*zoom: 1;

注:单独用overflow: hidden/auto;在IE6下不具有清浮动效果

6、给浮动元素下方加<br clear="all">;

7、给浮动元素下方加div并设置该div的样式为height: 0; font-size: 0; clear: both;

注:font-size: 0;在IE6下会出现2px的问题

8、给浮动元素加.clear {*zoom: 1;} .clear:after {content: “”; display: block; clear: both;}。

特别说明

1、清浮动clear: both只能加给块元素,否则无效;

2、如果父级元素有宽度或其它一些触发haslayout机制的属性,IE6、7可以不用清浮动,但IE7以上必须清浮动;

3、以上八条清浮动的方法使用时只需选择其中一条即可达到清除浮动的效果。笔者推荐使用最后一条清除浮动的方法:

  1. .clear {
  2.     *zoom: 1;
  3. }
  4. .clear:after {
  5.     content"";
  6.     displayblock;
  7.     clearboth;
  8. }

如果你有更好的清除浮动的方法,欢迎留言。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: