浮动小结

1 浮动可以让页面元素并排显示，制作一个干净的布局。严格定位，需要使用不限于“relative”和“absolute”定位。

2 浮动
● 页面元素定位的基本功能，创建一个自然流布局，允许元素设置自身大小和其父元素容器的大小。
● 元素浮动，其位置取决于放置在其周边元素的DOM（父子关系，兄弟关系）
● 最典型的问题：引起父元素塌陷：一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。

---

解决办法：

---

1 在容器的结束标签前添加一个空标签，设置其样式为“clear：both”，大多数情况下有效，但是不适合语义化，要死页面有多次浮动清除的话，造成空标签堆积，而且在页面中没有上下文内容。

---

2 使用“overflow”属性：在具有浮动元素的父容器中设置“overflow”的属性值为“auto”（在IE浏览器中会有滚动条）/“hidden”，这样父容器就会有一个高度存在。IE6里面，父容器需要设置一个“width”和“height”，高度可能是一个变量，宽度为100%，可以正常工作。

---

3 使用clearfix技巧：在父元素上使用“：before”和“：after”两个伪类。可以在浮动元素的父容器前面和后面添加隐藏的元素。“：before”伪类是用来防止元素顶部的外边距塌陷，在IE67中，使用“display：table”创建一个匿名的“table-cell”元素，确保一致性。“：after”伪类是用来防止子元素的底部的外边距的塌陷，以及用来清除元素的浮动。在IE67中在加上“*zoom”属性来触发父元素的hasLayout的机制，决定了元素怎样渲染内容，以及元素与元素之间的相互影响。

---

详情参考：w3cplus