一、浮动
1. 浮动
::: note
网页布局第一准则：多个块级元素纵向排列使用标准流，横向排列使用浮动
:::
浮动：用于创建浮动框，将其移动到一边，直到边缘触及包含另一个浮动框的边缘
语法：
| 属性值 | 描述 |
|---|
| none | 元素不浮动（默认） |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
::: details
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. 浮动的特性
::: tip
- 脱标：脱离标准流的控制（浮）移动到指定位置（动）
- 浮动的盒子不能保留原来的位置
- 多个盒子都设置了浮动，则会按照属性值 紧贴着（没有缝隙）显示在一行，如果显示不下会另起一行显示
- 任何元素都可以浮动，浮动元素会具有行内块元素的特性
- 如果块级元素没有设置宽度，默认宽度和父级一致，但是浮动后，他的宽度由内容的多少决定
- 浮动元素一般会和标准流的父元素搭配使用
:::
::: details
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>
|
:::
::: details
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>
|
:::
::: warning
- 浮动和标准流的父盒子搭配使用
- 先用标准流的父元素排列上下位置，再用内部子元素采取浮动排列左右位置
- 一个元素浮动，理论上其余的兄弟元素也要浮动
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流
:::
二、清除浮动
清除浮动：消除元素浮动带来的影响
如果父元素没有设置高度，则需要清除浮动
1. 清除浮动
语法：
::: tip
实际工作中，几乎只用 clear: both;
:::| 属性值 | 描述 |
|---|
| left | 清除左侧浮动的影响 |
| right | 清除右侧浮动的影响 |
| both | 清除两侧浮动的影响 |
2. 清除浮动的方法
::: note
- 额外标签法（隔墙法）
- 在浮动元素的末尾添加一个空的标签,如 br、div等
- 空标签只能是 br 和 div等 块级 元素，不能是行内元素
- 父标签添加
overflow: hidden - 父元素添加
:after 伪元素- 固定写法，将内容复制到css中，为父元素添加类名
clearfix1
2
3
4
5
6
7
8
9
10
11
| .clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
|
- 双伪元素清除浮动
- 固定写法，将内容复制到css中，为父元素添加类名
clearfix1
2
3
4
5
6
7
8
9
10
11
| .clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
|
::: details
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>
|
:::
