css如何清除浮动（三）
2017-04-11 00:00
260 查看
在上一篇文章中我们使用clear：both来清除浮动。会使margin失去效果，那如何才能即清除浮动，又不会使margin失效呢？
这就需要使用下面我们介绍的方法隔墙法。我们仍然以同样的例子来清除浮动。
隔墙法的本质就是在div1和div2之间再设置一个div。div作为一个墙，隔开了两部分，两部分都浮动，互不影响。
这里我们将这个div的类设置为clear。对clear这个div设置clear：both,而不在是对div2设置clear：both。如果想让div1和div2之间出现间距的，那么久可以对clear这个div设置高度就可以了。此时我们可以对clear这个div设置一个公共类h10,设置它的高度为10px，就可以出现使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;
width: 120px;
height: 40px;
background-color: red;
}
.clear{
clear: both;
}
.h10{
height: 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="clear h10"></div>
<div class="div2">
<ul>
<li>方法</li>
<li>态度</li>
<li>面试</li>
</ul>
</div>
</div>
</body>
</html>
运行结果：
这就需要使用下面我们介绍的方法隔墙法。我们仍然以同样的例子来清除浮动。
隔墙法的本质就是在div1和div2之间再设置一个div。div作为一个墙，隔开了两部分，两部分都浮动，互不影响。
这里我们将这个div的类设置为clear。对clear这个div设置clear：both,而不在是对div2设置clear：both。如果想让div1和div2之间出现间距的，那么久可以对clear这个div设置高度就可以了。此时我们可以对clear这个div设置一个公共类h10,设置它的高度为10px，就可以出现使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;
width: 120px;
height: 40px;
background-color: red;
}
.clear{
clear: both;
}
.h10{
height: 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="clear h10"></div>
<div class="div2">
<ul>
<li>方法</li>
<li>态度</li>
<li>面试</li>
</ul>
</div>
</div>
</body>
</html>
运行结果：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 2016/2/24 1,css有几种引入方式 2,div除了可以声明id来控制，还可以声明什么控制？ 3,如何让2个div，并排显示。4，清除浮动 clear：left / right / both
- css如何清除浮动（二）
- css的浮动以及如何清除浮动
- css如何清除浮动（clear和BFC）
- css如何清除浮动（五）
- css如何清除浮动（五）
- css如何清除浮动（一）
- CSS——如何清除浮动
- css如何清除浮动（四）
- css如何清除浮动（三）
- css如何清除浮动（四）
- css如何清除浮动（二）
- css如何清除浮动（一）
- CSS中清除浮动的作用以及如何清除浮动
- CSS学习笔记一 如何清除浮动
- css如何清除浮动常用的方法有哪些
- css中的浮动以及如何清除浮动
- css 清除浮动的新方法
- 三种css清除浮动的方法
- CSS 清除浮动元素方法 整理