传统网页布局的三种方式
网页布局的本质
css提供了三种传统布局方式（简单来说，就是盒子如何进行排列顺序)
普通流（标准流） 浮动 定位
浮动
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移到一边，直到左边缘或者右边缘触及包含块或另一浮动框的边缘
语法：
选择器 {float: 属性值}
none 元素不浮动
left 元素向左浮动
right 元素向右浮动
特性
1、脱离了标准流的控制，移到指定位置
浮动的盒子不再保留原先的位置，其他盒子可以占有
2、如果多个盒子都设置了浮动，则他们会按照属性值一行显示并且顶端对齐排列
3、浮动元素具有行内块特性（任何元素变为浮动元素都会有行内块特点）
浮动元素经常和标准流父级搭配使用
先用标准流的父元素上下排列位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
清除浮动
为什么清除浮动？
理想状态下，我们想让盒子撑开父亲，有多少孩子，我父盒子就有多高。
如果让盒子浮动，父亲的高度就会变成0
三个条件：
父级没有高度 子盒子浮动 影响下面的布局
清除浮动的本质
清除浮动元素造成的影响
策略：闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子
语法： 选择器{clear: 属性值}
属性值 描述
left 清除左侧浮动影响
right 清除右侧浮动影响
both 清除左右两侧浮动影响
几乎只用 clear: both;
方法：
1、额外标签法也称为隔墙法，是W3C推荐的做法
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素
额外标签法
就是在浮动元素末尾添加一个空的标签。例如 <div style=" clear:both"></div>
或者<br>或者<p></P>
