那些年我们一起清除过的浮动
浮动(float),一个我们即爱又恨的属性。爱,因为通过浮动,我们能很方便地布局; 恨,浮动之后遗留下来太多的问题需要解决,特别是IE6-7(以下无特殊说明均指 windows 平台的 IE浏览器)。也许很多人都有这样的疑问, 浮动从何而来?我们为何要清除浮动?清除浮动的原理是什么? 本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除浮动,以前我也一直这么叫着,但是确切地来说是不准确的。我们应该用严谨的态度来对待代码,也能更好地帮助我们理解开头的三个问题。 1)清除浮动:清除对应的单词是 clear,对应CSS中的属性是 clear:left | right | both | none; 2)闭合浮动:更确切的含义是使浮动元素闭合,从而减少浮动带来的影响。 两者的区别 请看优雅的 Dem o 通过以上实例发现,其实我们想要达到的效果更确切地说是闭合浮动,而不是单纯的清除浮动,在footer上设置clear:both清除浮动并不能解决warp高度塌陷的问题。 结论:用闭合浮动比清除浮动更加严谨,所以后文中统一称之为:闭合浮动。 二、为何要闭合浮动? 要解答这个问题,我们得先说说CSS中的定位机制:普通流,浮动,绝对定位 (其中