浮动小结

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

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

---

解决办法&＃xff1a;

---

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

---

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

---

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

---

详情参考&＃xff1a;w3cplus