清除浮动的几种方式的比较和position属性的比较

1. 对父级设置适合CSS高度

对父级设置适合高度样式清除浮动，一般设置高度需要能确定内容高度才能设置。

缺点：高度固定不可变，不够灵活

2. clear:both清除浮动

为了统一样式，我们新建一个样式选择器CSS命名为“.clear”，并且对应选择器样式为“clear:both”，然后我们在父级“</div>”结束前加此div引入“class="clear"”样式。这样即可清除浮动。

3. 伪类 :after 控制（最佳）

需要注意的是 :after是伪元素，不是伪类，很多清除浮动大全之类的文章都称之为伪类，由于IE6-7不支持:after，使用zoom:1触发hasLayout。 (.div指父级元素)

.div{zoom:1;}
.div:after {
Content:””;
Diaplay:block;
Clear:both;
}

4. 父级div定义overflow:hidden

对父级CSS选择器加overflow:hidden样式，可以清除父级内使用float产生浮动。优点是可以用很少的CSS代码即可解决浮动产生。

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；

position属性的比较

• static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
• relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
• absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
• fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
  什么是文档流？

  将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。
  只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和固定定位。