城墙墨

inkwall

0%

清除元素浮动的四种方式

发表于 分类于 ， Valine：

前言

最近自己在写个网页 城墙墨の小破站，遇到了关于float实现元素横向排列及清除浮动影响问题，在这里整理记录一下。

定义float

float元素可以定义元素浮动显示

1
float: left | right | none

利用浮动，使元素横向排列

设置4个横向排列的item，代码如下：

1
2
3
4
5
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
1
2
3
4
5
.item{
    width: 125px;
    height: 165px;
    float: left;
}

利用float就能使这几个div横着排列

清除元素浮动影响（四种方式）

由于元素浮动后不占据空间，在.item下面在设置div块时就会被浮动的.item所遮挡，所以这个时候就需要清除元素浮动影响,有两种方法

1.overflow:auto;

在浮动的元素的外面套个div盒子，例如如下在.item外面套个#category,css设置为overflow：auto

1
2
3
4
5
6
7
<div id="category">
    <div class="item first"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item last"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#category {
    overflow: auto;	
    background-color:brown;
    margin: auto;
}

#category .item{
    width: 125px;
    height: 165px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 25px;
    border-right: 1px dashed black;
    float: left;
}

2.clear清除元素浮动影响

1
clear: left | right | both

在浮动元素后设置个标签，css样式设置为clear: both;

即在父容器底部添加了一个非浮动元素，这样父元素就把所有元素包括在内了

1
2
3
4
5
6
7
8
9
<div id="category">
    <div class="item first"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item last"></div>

    <div style="clear:both;"></div>
</div>

3.使用after伪元素清除浮动

1
2
3
4
5
6
7
8
9
10
.clearfix:after{
    contet: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden; 
}
.clearfix {
    *zoom: 1;   /*zoom 1 是IE6清除浮动的方式 * IE6、7读取  */
}

4.使用before和after双伪元素

1
2
3
4
5
6
7
8
9
10
.clearfix:before ,.clearfix:after {
	content: "";
	display: table;	/*这句话可以触发FBC*/
}
.clearfix:after {
	clear: both;
}
.clearfix {
	*zoom: 1;
}

利用clear实现一个对话框

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
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>对话框</title>
        <style type="text/css">
            ul {
                width: 300px;
                height: 500px;
                border-width:2px;
                border-color: black;
            }

            li {
                clear: both;
                background-color: aquamarine;
            }
            .a {
                float:left;
            }
            .b {
                float: right;
            }
        </style>
    </head>
    <body>
        <ul>
            <li class="a">喵喵喵</li>
            <li class="b">汪汪汪</li>
            <li class="a">🤨</li>
            <li class="b">🙃</li>
            <li class="a">emm</li>
            <li class="b">。。。</li>
            <li class="a">我喵星人宇宙无敌超级美</li>
            <li class="b">呵呵呵!!!</li>
        </ul>
    </body>
</html>