**
页面布局——浮动布局
浮动布局是页面的一种重要布局方式
它使用float属性为元素开启浮动，float属性的可选值有left、right、none
none 是默认值，即不开启浮动
left 向左浮动，靠父元素的左边浮动
right 向右浮动，靠父元素右边浮动
元素浮动前位于文档流中的特点
块级元素（block）：在文档流中独占一行，宽度默认是父级的宽度，高度默认由内容撑开，可为其自定义设置宽高；
行内元素（inline）：在文档流中不独占一行，宽和高都默认由内容撑开，且不可为其自定义设置宽高；
行内块元素（inline-block）：在文档流中不独占一行，宽和高都默认由内容撑开，可为其自定义设置宽高；
元素浮动后的特点
- 浮动元素完全脱离文档流，不再占据文档流中的位置
块级元素（block）、行内元素（inline）、行内块元素（inline-block）脱离文档流的特点：
不再独占一行，宽高默认由内容撑开，但可以为其自定义设置宽高，即均呈现行内块元素（inline-block）的特点
下图做了一个小小的测试——元素脱离文档流后均呈现行内块元素的特点
2. 浮动元素默认不会从父元素中溢出
3. 浮动元素的层级会提升，从而遮挡住未开启浮动的元素
4. 浮动元素会遮挡未开启浮动的元素，但不会盖住未开启浮动的文字，文字会自动环绕在浮动元素周围
5. 浮动元素不会超过它前一个浮动的兄弟元素，最多就是和它一样高
总结： 浮动首先要搞清楚元素浮动后呈现的特点，不论是块级元素、行内元素还是行内块元素，他们浮动脱离文档流后均会呈现出行内块元素的特点：不独占一行，宽高默认由内容撑开，但可以为其设置自定义宽高。后面几个特点可以自己敲一个简单的测试来验证一下。
**