浮动布局：
实现：
方式一：display:inline-block
弊端：存在代码换行被解析
方式二：float:left
优点：避免代码换行被解析
可左右浮动
浮动的特性：
1.浮动的元素排在同一行
2.浮动的元素内容撑开宽度
3.浮动的元素支持所有的css样式
4.浮动的元素脱离文档流
5.浮动的元素提升层级半级
Tips:脱离文档流后的元素会脱离原来的父级的布局，导致父级无法使用子级来撑开宽高。
处理方式:清理浮动的操作（BFC）
overflow:hidden(溢出避免)
针对浮动的元素脱离文档流，接下来我们学习上面引入的BFC概念来处理该特性：
overflow 溢出
hidden 溢出部分隐藏
auto 溢出自动出现滚动条
scroll 始终出现滚动条
元素的居中（区别与文本居中）
margin:0 auto;(外边距上下设置为0边距，左右设置自动外边距，生效后即为居中)
元素的伪类
:hover (鼠标悬停)
:after (在元素内容之后插入一些内容)
浮动：其实就是使元素脱离文档流，按照一定的方式排列，遇到相邻的浮动元素或者父级的边界停下来。
BFC (清理浮动，处理浮动元素会脱离文档流的特性)
1.父级也浮动；
弊端：左右的margin:0 auto; 会失效
层级复杂时，不好控制布局；
2.父级加上display:inline-block;
弊端：左右的margin:0 auto; 会失效
（如果需要让元素居中可以给父级加text-align:center）
3.给父级加高度
弊端：失去了随机扩展性
4.<br>标签
作用：换行
写法：<br clear="all">
弊端：不符合w3c的规范：结构行为样式三者分离，不推荐
5.clear
规定元素的哪一侧不允许其他浮动元素。
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。(常用)
弊端：不符合w3c的规范：结构行为样式三者分离，不推荐
6.伪类清浮动（目前主流方法，推荐使用）
.clear:after {
content: "";
display: block;(必须设置伪类为块级显示标签，支持css样式，才能使BFC生效)
clear: both;
}
需要给那个元素清浮动，就把哪个元素的class设置为clear
针对浮动的元素提升层级半级，我们可以利用该特性，实现类型文字环绕图片的效果。
