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>