No.7小白的HTML+CSS心得篇

今天看到大神对浮动定位作了个详细的分析  刚好就分析了当时任务三遇到的问题

在一个div中定义了三个div，让横向排列，结果父元素div的背景色显示不出来了 ，这是个经典问题----包含浮动

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>	

.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 100px;
  float: left;
  margin: 10px;
  width: 200px;
}	

解决方法（3个）：
        1）在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。
           这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。

        2）Overflow技巧

                  一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中设置“overflow”的属性值为“auto”，这样父容器就会有一个高度存在，

                  在我们例子中的灰色背景也就能看得到了。

        3）clearfix技巧

                   “clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后面创建隐藏元素。

                   “:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。

                   “:after”伪类是用来防止子元素的底部的外边距塌陷，以及用来清除元素的浮动。

                    在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的haslayout机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。

No.7小白的HTML+CSS心得篇

原文：http://www.cnblogs.com/lanyiming/p/5324406.html