您的位置：首页 > Web前端 > CSS

css如何清除浮动（二）

2017-04-11 00:00 176 查看

在上篇介绍通过设置祖先元素的高度类清除浮动，但在实际的网站开发中，很少会设置元素的高度，那这是为什么呢？

是因为元素一般都能被内容撑高，所以不需要设置高度。

那能不能不写height，也把浮动清除了呢？也让浮动之间，互不影响呢？

还是同样的例子，通过对div2设置clear: both;来清除浮动，clear就是清除的意思，both就是全部的意思，包括左浮动和右浮动。这里对li设置左浮动，是div2会紧追在div1后面，就需要对div2清除浮动。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

*{

margin: 0;

padding: 0;

}

li{

float: left;

text-align: center;

background-color: red;

width: 90px;

height: 40px;

list-style: none;

margin-left: 10px;

}

/*第2个div设置clear：both*/

.div2{

clear: both;

margin-top: 10px;

}

</style>

</head>

<body>

<div>

<h3>清除浮动</h3>

<div class="div1">

<ul>

<li>html</li>

<li>css</li>

<li>js</li>

<li>jq</li>

</ul>

</div>

<div class="div2">

<ul>

<li>方法</li>

<li>态度</li>

<li>面试</li>

</ul>

</div>

</div>

</body>

</html>

运行结果：

由运行结果，我们可以看出div2清除了浮动，但是对div2设置的margin-top: 10px;失效了。同样对div1设置margin-bottom也是失效的，本质原因div没高。这也是使用clear属性清除浮动的一个弊端。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css 清除浮动

相关文章推荐

新的分享

章节导航