css如何清除浮动(三)
2017-04-11 19:10
435 查看
在上一篇文章中我们使用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 清除浮动元素方法 整理