css如何清除浮动（一）

来源：互联网发布：linux哪几种运行级别编辑：程序博客网时间：2024/05/22 07:52

我们都知道通过浮动可以是元素脱离标准文档流。一个浮动的元素，如果没有设置width，那么将自动收缩为文字的宽度（这点非常像行内元素）。

<!DOCTYPE html>

<head>

<title>Document</title>

li{

float: left;

text-align: center;

background-color: red;

width: 90px;

height: 40px;

list-style: none;

}

</style>

</head>

<body>

<div>

<ul>

</ul>

</div>

<ul>

</ul>

</div>

</body>

</html>

运行结果：

大家注意看一下，这里我们设置的是2个div。每个div里面包含ul，而且对ul里面的li设置左浮动。div是块级元素会单独占据一行，但这里的2个div却并列在一行，显然是不符合常理的。那这是为什么呢？

是因为在这里，我们没有为div设置高度。如果一个元素要浮动，那么它的祖先元素一定要有高度。有高度的盒子，才能关住浮动。只要浮动在一个有高度的盒子中，那么这个浮动就不会影响后面的浮动元素。所以就是清除浮动带来的影响了。

下面对li的祖先ul设置高度

ul{

height: 50px;

}

此时运行结果

也可以设置div1和div2的高度

.div1,.div2 {

height: 50px;

}

运行的结果一致。

这里要注意一点，祖先元素的高度要大于等于浮动元素的高度，我们这是li的高度为40px，那么设置祖先元素的高度至少为40px。

这就是请出去浮动的第一种方法:给浮动元素的祖先元素加高度。总结一句话：

有高度的盒子才能关注浮动。

0 0