传统布局方式二---浮动，以及清除浮动的方法

一、浮动（float）的定义

• 使元素脱离文档流、按照指定方向发生移动，遇到父级元素或者相邻的浮动元素停了下来。
• 文档流：文档流是文档中可显示对象在排列时所占用的位置。
• float 的属性值为left、right、none

二、浮动的特性

• 浮动元素会脱离标准流(脱标)
• 浮动的盒子不再保留原先的位置
• 浮动的元素会一行内显示并且元素顶部对齐
• 浮动的元素会具有行内块元素的特性

三、为什么要清除浮动

因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是被子元素撑开的，但是当子元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌。所以我们需要清除浮动。

四、清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

五、清除浮动的方法

1. 额外标签法也称为隔墙法，是 W3C 推荐的做法（不常用）。

• 额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签（如
  等）。
• 优点： 通俗易懂，书写方便
• 缺