CSS 浮动

一、浮动

1. 浮动

网页布局第一准则:多个块级元素纵向排列使用标准流,横向排列使用浮动

浮动:用于创建浮动框,将其移动到一边,直到边缘触及包含另一个浮动框的边缘

语法:

1
选择器 {float: 属性值;}

属性值描述
none元素不浮动(默认)
left元素向左浮动
right元素向右浮动
代码示例
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box3 {
width: 100px;
height: 100px;
background-color: red;
float: right;
}


</style>
</head>
<body>
<div class="box1">左浮动</div>
<div class="box2">左浮动</div>
<div class="box3">右浮动</div>

</body>
</html>

2. 浮动的特性

  1. 脱标:脱离标准流的控制(浮)移动到指定位置(动)
  2. 浮动的盒子不能保留原来的位置
  3. 多个盒子都设置了浮动,则会按照属性值 紧贴着(没有缝隙)显示在一行,如果显示不下会另起一行显示
  4. 任何元素都可以浮动,浮动元素会具有行内块元素的特性
    1. 如果块级元素没有设置宽度,默认宽度和父级一致,但是浮动后,他的宽度由内容的多少决定
  5. 浮动元素一般会和标准流的父元素搭配使用
代码示例
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
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 1200px;
height: 460px;
background-color: pink;
margin: 0 auto;
}

.left-box,
.right-box {
float: left;
}

.left-box {
width: 230px;
height: 460px;
background-color: red;
}

.right-box {
width: 970px;
height: 460px;
background-color: aquamarine;
}
</style>
</head>

<body>
<div class="box">
<div class="left-box"></div>
<div class="right-box"></div>
</div>


</body>

</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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
motion: 0;
padding: 0;
}
.box {
width: 1226px;
height: 615px;
background-color: aquamarine;
margin: 20px auto;
}
.xb1 {
float: left;
width: 234px;
height: 615px;
background-color: chocolate;
}
.xb2 {
float: left;
width: 992px;
height: 615px;
background-color: beige;
}
.xxb {
width: 234px;
height: 300px;
background-color: darkolivegreen;
float: left;
margin-left: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="xb1"></div>
<div class="xb2">
<div class="xxb xxb1"></div>
<div class="xxb xxb1"></div>
<div class="xxb xxb1"></div>
<div class="xxb xxb1"></div>
<div class="xxb"></div>
<div class="xxb"></div>
<div class="xxb"></div>
<div class="xxb"></div>
</div>
</div>

</body>
</html>
  1. 浮动和标准流的父盒子搭配使用
    1. 先用标准流的父元素排列上下位置,再用内部子元素采取浮动排列左右位置
  2. 一个元素浮动,理论上其余的兄弟元素也要浮动
    1. 浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

二、清除浮动

清除浮动:消除元素浮动带来的影响
如果父元素没有设置高度,则需要清除浮动

1. 清除浮动

语法:

1
选择器(clear: 属性值);

实际工作中,几乎只用 clear: both;

属性值描述
left清除左侧浮动的影响
right清除右侧浮动的影响
both清除两侧浮动的影响

2. 清除浮动的方法

  1. 额外标签法(隔墙法)
    1. 在浮动元素的末尾添加一个空的标签,如 br、div等
    2. 空标签只能是 br 和 div等 块级 元素,不能是行内元素
  2. 父标签添加overflow: hidden
  3. 父元素添加 :after 伪元素
    1. 固定写法,将内容复制到css中,为父元素添加类名 clearfix
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .clearfix:after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
      }
      .clearfix {
      /* IE6、7 专有 */
      *zoom: 1;
      }
  4. 双伪元素清除浮动
    1. 固定写法,将内容复制到css中,为父元素添加类名 clearfix
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      .clearfix:before,.clearfix:after {
      content: "";
      display: table;
      }
      .clearfix:after {
      clear: both;
      }
      .clearfix {
      /* IE6、7 专有 */
      *zoom: 1;
      }
代码示例
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
39
40
41
42
43
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 100px;
background-color: antiquewhite;
margin: 10px auto;
}
.xb {
float: left;
width: 40px;
height: 30px;
background-color: aquamarine;
margin: 5px;
}
.box2 {
width: 100px;
height: 30px;
background-color: lightcoral;
margin: 0 auto;
}
.box br {
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="xb"></div>
<div class="xb"></div>
<div class="xb"></div>
<br>
</div>
<div class="box2">添加空标签</div>

</body>
</html>