float: left/right/none;

浮动的特性：

1. 支持宽高

2. 在一行显示

3. 不设置宽度，宽度由内容撑开

4. 会按照指定的方向排列移动，直到碰到浮动元素或父级边界停止

5. 元素想排列在一行，最好给需要排列在一行的元素都加上浮动

6. 脱离文档流，元素在排列时，不再占有位置

7. 元素浮动之后，就撑不开父级的高度，给父级元素清除浮动或者设置高度

8. 触发BFC

9. 浮动之后，上下的 margin 不再叠加

TIPS：

1. 需要并列在一行的元素都加浮动

2. 浮动最好在同级元素间添加

3. 元素浮动之后，如果高度无须内容撑开，就设置固定的高度

4. 元素浮动之后，如果高度需要内容撑开，给父级清浮动

浮动结构的书写

1. 从外到里，从上到下分行，从左到右分列

2. 每一行每一列都需要单独的包起来

清除浮动：

元素浮动之后，会脱离文档流，脱离文档流之后，浮动元素就撑不开父级的高度

1. 在浮动元素的最下边添加

<div class="clearFix"></div>
.clearFix {
    clear: both;
}

2. 在浮动元素的最下边添加

<div clear="all"></div>

3. 给浮动元素的父级添加 class （clearFix）

.clearFix:after {
    content: "";
    display: block;
    clear: both;
}

4. 让浮动元素的父级触发BFC