CSS中 清除浮动解决“包含问题”

时间:2023-03-08 15:52:09

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

在一个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机制。决定了元素怎样渲染内容,以及元素与元素之间的相互影响。

相关文章