css 清除浮动-CSS中消除浮动的几种方法

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

在谈论去除浮动之前，我们先来看看浮动的一些属性及其影响

1
2
3
4
5

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}

他得到的结果是

我们需要的疗效并不是这样的，但是从这张图中我们可以看到父元素的高度已经塌陷了，浮动的子元素甚至影响了父元素的兄弟元素。

然后我们添加和删除

1
2
3
4
5
6

.textDiv {
    color: blue;
    border: 2px solid blue;

    clear: left;
}

得到治愈

这时候疗效就很明显了，父元素不再塌陷，黄色部分也在下面，父元素的兄弟元素不受影响。

因为红色区域左边的浮动被设置为消除，前面.floatDiv区域的浮动被消除，所以白色区域可以在下面，父元素不会塌陷，从这里我们也可以猜测不折叠的原因并不是因为浮动本身受到影响，而是因为.textDiv部分存在于整个父元素的最左端，这使得他撑起了父元素的高度。

由此我们可以看出，浮动并没有脱离文档流，它仍然存在于其中，并使该元素位于父元素中，但与元素1相比css 清除浮动，它似乎脱离了文档流，元素1通常位于文件流了，就是它飘出去了。

浮动清理方法这里注意，使用clearfix时，必须是display:block; 就像前一个必须是块级元素一样。

Overflow的属性值除了visible之外还可以实现，一般使用auto

示例如下：

1
2
3
4
5

<div class="topDiv">
    <div class="floatDiv">float left</div>
    <div class="textDiv">...</div>
</div>
<div class="bottomDiv">...</div>

1
2
3
4
5
6
7
8
9

.topDiv {
    width: 500px;
    padding: 4px;
    border: 2px solid black;

    /* 区别在这里*/
    overflow: auto;
}
/*其他同上*/

由此可以看出，确实父元素不再折叠，但是浮动造成的文本换行依然存在。

而这个疗效的形成有一个原理——Block Low Frame Context (BFC)

块低网格上下文是 CSS 渲染的一部分。 是一个区域，规定了块盒的渲染方式以及浮动之间的影响关系

所以这里overflow的作用不仅仅是创建一个BFC区域css 清除浮动，让内部浮动的影响能够内化，和overflow一样的效果还设置了display:inline-block和display:table-cell。

BFC布局通常可以用来实现浮动等自适应布局。

参考链接：

MDN 对 BFC 的定义