7.浮动

Pupper大约 4 分钟学习笔记前端基础CSS

一、浮动

1. 浮动

注

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

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

语法：

选择器 {
	float: 属性值;
}

属性值	描述
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

详情

<!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. 如果块级元素没有设置宽度，默认宽度和父级一致，但是浮动后，他的宽度由内容的多少决定
浮动元素一般会和标准流的父元素搭配使用

详情

<!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>

详情

<!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. 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

二、清除浮动

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

1. 清除浮动

语法：

选择器（clear: 属性值）;

提示

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

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

2. 清除浮动的方法

注

额外标签法（隔墙法）
1. 在浮动元素的末尾添加一个空的标签,如 br、div 等
2. 空标签只能是 br 和 div 等块级元素，不能是行内元素
父标签添加overflow: hidden

父元素添加 :after 伪元素

固定写法，将内容复制到 css 中，为父元素添加类名 clearfix

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	/* IE6、7 专有 */
	*zoom: 1;
}

双伪元素清除浮动

固定写法，将内容复制到 css 中，为父元素添加类名 clearfix

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	/* IE6、7 专有 */
	*zoom: 1;
}

详情

<!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>