为什么清除浮动
- 在讲清除浮动的方法之前，我们先来了解一下为什么要清除浮动，清除浮动的目的是什么，即，要解决什么样的问题。来看一个浮动的例子(略去了文字内容)：
首先，定义三个div：父容器container、子容器box1、box2，这里container没有给定高度。
首先要知道，css中的块级元素是独占一行的，从上往下排列，我们称为标准流，这里的div就是块级元素。没有浮动,自上而下排序.
1
2
3
4
5
6
| <body>
<div class="father">
<div class="box"></div>
</div>
<div class="box1"></div>
</body>
|
css样式 :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .father {
border: 1px solid red;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(14, 236, 25);
float: left;
}
.box1 {
width: 300px;
height: 300px;
background-color: rgb(230, 169, 2);
}
|
这样一来,box1就到box这个盒子下面了,这样不是我们想要的结果,你就要说了,让下面这个盒子也浮动不就可以了,但是后面的元素,全部浮动? 这当然不太现实.
接下来清除浮动
第一种方式
1
2
3
4
| <div class="father clearfix">
<div class="box"></div>
</div>
<div class="box1"></div>
|
css样式 :
1
2
3
4
| .clearfix {
overflow: hidden;
zoom: 1;
}
|
使用这种方法，必须定义width或者zoom,而且不能设置高度height，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏 .
这样一来浮动就清除了,结果还是我们的样式,我写的样式不中要重要的是,将浮动清除,对吧!!!
第二种
使用双伪元素清除浮动
HTML样式 :
1
2
3
4
5
6
| <body>
<div class="father clearfix">
<div class="box"></div>
</div>
<div class="box1"></div>
</body>
|
css样式 :
1
2
3
4
5
6
| .clearfix:before,
.clearfix::after {
content: '';
display: block;
clear: both;
}
|
第三种
HTML样式还是那样,这里就不重复去写了,直接写清除浮动的样式了
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .clearfix {
clear: both
}
.father {
border: 1px solid red;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(14, 236, 25);
float: left;
}
.box1 {
width: 300px;
height: 300px;
background-color: rgb(230, 169, 2);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<div class="clearfix"></div>
</div>
<div class="box1"></div>
</body>
|
在浮动的元素后面添加一个空标签,添加一个类名,这种写法不推荐,因为这种方法还会给HTML结构添加很多没有用的标签,增加了HTML结构的复杂度.
第四种
给父级元素添加一个属性 overflow:hidden
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
.father {
border: 1px solid red;
overflow: hidden;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(14, 236, 25);
float: left;
}
.box1 {
width: 300px;
height: 300px;
background-color: rgb(230, 169, 2);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<!-- <div class="clearfix"></div> -->
</div>
<div class="box1"></div>
</body>
|
这写法的原理就是必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
- 优点：简单，代码少，浏览器支持好
- 缺点：内部宽高超过父级div时，会出现滚动条。
- 建议：不推荐使用，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧。
- 评分：★★☆☆☆
第五种
给父级元素添加 display:table
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| .father {
border: 1px solid red;
display: table;
}
.box {
width: 100px;
height: 100px;
background-color: rgb(14, 236, 25);
float: left;
}
.box1 {
width: 300px;
height: 300px;
background-color: rgb(230, 169, 2);
}
</style>
</head>
<body>
<div class="father">
<div class="box"></div>
<!-- <div class="clearfix"></div> -->
</div>
<div class="box1"></div>
</body>
|
这种写法就是将 div 属性变为表格,没有优点, 缺点：会产生新的未知问题, 不推荐使用, 作为了解就好..
第六种
1
2
3
4
5
6
7
8
| .clearfix::after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
|
给父元素添加这个类名
以上是几种清除浮动的方法,当然还有好多, 以上方法均可以清除浮动,推荐的还是最后一种方法….
