网页布局是什么？

网页布局，其本质就是用css来将盒子摆放到相应的位置。

css提供了3种传统的布局方式（盒子怎样排列）：

• 普通流
• 浮动
• 定位

普通流

普通流也叫标准流或文档流，即标签按照规定好的方式排列

• 块级元素独占一行，从上向下排列

<div></div>
<hr/>
<p></p>

• 行内元素从左到右依次排序，碰到父元素边缘会自动换行

<span></span>

由于很多布局效果标准流没有办法完成，此时就可以利用浮动完成布局，因为浮动可以改变元素标签默认的排列方式。

浮动（float）

浮动的典型应用：将多个块级元素放在一行显示。 float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或浮动框的边缘。

语法

选择器{
    float：属性值
}

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

案例：

<div class="box1">盒子1</div>
	<div class="box2">盒子2</div>
	<style>
		.box1{
			background-color: aqua;
			border: 1px solid black;
			float: left;
			height: 300px;
			width: 300px;
		}
		.box2{
			background-color:blue;
			border: 1px solid black;
			float: right;
			height: 300px;
			width: 300px;
		}
	</style>

浮动的特性：

• 浮动元素会脱离标准流 （即脱离标准普通流的控制，移动到指定的位置，浮动的盒子不再保留原先的位置）
• 浮动元素会在一行内显示并且元素顶部对齐（浮动的元素相互贴在一起不会有缝隙，如果父级元素装不下，则会另起一行对齐排列）
• 浮动的元素会具有行内块元素的特性（块级元素没有设置宽度，其宽度和父级元素一样，添加浮动之后，大小由内容决定）

浮动元素经常和标准流父级搭配使用

为了约束浮动元素的位置，网页布局一般采用的策略是：先用标准的父元素排列上下位置，内部子元素采用浮动排列左右位置。

总结： 多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。