一、网页布局的三种传统方式

在网页布局上，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。

1.标准流

标准流是最基本的布局方式，就是标签按照规定好的默认方式排列。常见的标准流有块级元素和行内元素：

块级元素：独占一行，从上向下排列。常用元素：div, hr, p, h1-h6, ul, ol, dl, form, table
行内元素：按照顺序从左到右顺序排列，碰到父元素边缘自动换行。常用元素：span, a, i, em，img，select

2.浮动

1.浮动的原因及特点

有些布局效果没办法用标准流实现，因此需要浮动来完成布局。最常见的就是浮动可以让多个块级元素在一行内排列显示。而且浮动的元素会变成行内元素，如果原来没设置宽高，那么会按照内容的大小显示，如果设置了宽高则按宽高显示。

2.常见的浮动

语法：

选择器 {
	float: 属性值;
}

属性值：

left : 左浮动
right : 右浮动

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width:200px;
				height: 200px;
				background-color: #00FFFF;
				float: left;
			}
			.box2{
				width:200px;
				height: 200px;
				background-color: yellowgreen;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
	</body>
</html>

左浮动效果图：在这里插入图片描述右浮动代码及效果图：

float: right;

在这里插入图片描述

3.浮动的影响

设置了浮动的元素会脱离标准流的控制从原来的位置移动到指定位置，不再保留原先的位置。浮动不仅影响父级元素的排版，还会影响浮动元素后面元素的排版。常见的浮动的影响是导致父级元素高度坍塌：当元素被设置浮动后，若父级元素没有设置高度，父元素后面的元素会顶上去，造成父级元素坍塌。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width:200px;
				height: 200px;
				background-color: #00FFFF;
				float: left;
			}
			.box2{
				width:200px;
				height: 200px;
				background-color: yellowgreen;
				float: left;
			}
			.parent1{
				width: 100%;
			}
			.parent2{
				width: 100%;
				height: 400px;
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="parent1">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="parent2"></div>
	</body>
</html>

在这里插入图片描述因此需要清除浮动。

4.清除浮动

常见的清除浮动有以下3种方法：

（1）在浮动元素后使用一个空元素来清除浮动。

<body>
		<div class="parent1">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="box3"></div>
		</div>
		<div class="parent2"></div>
	</body>

.box3 {
  clear: both;
  }

（2）给父元素添加overflow:hidden或者overflow:auto; 若在 IE6 中还需设置 zoom:1。

.parent1{
				width: 100%;
				/* overflow:hidden; */
				overflow:auto;
				/* zoom:1 */
			}

（3）使用CSS的:after伪元素，实现父元素末尾添加一个看不见的块元素来清理浮动。添加以下代码：

.parent1:after{
			    content: "";
			    display: block;
			    height: 0;
			    clear:both;
			    visibility: hidden;
			}

同样的，若在 IE6 中还需设置.parent1{ zoom:1}

效果图：在这里插入图片描述

3.定位

[定位的四个属性请见文章](position四个属性简要分析 - 掘金 (juejin.cn))

css浮动及清除浮动方案