float

特点：

• 元素浮动之后脱离文档流
• 浮动后的元素，不管是块儿级元素还是其他，宽高都是由内容撑开，但是可以设置宽高
• 浮动后的margin塌陷、合并问题不再存在
• 浮动后的元素不会像行内块儿一样被当做文本来处理（没有行内块儿空白问题）

可选值：

left, right

浮动后影响

• 子元素全部为浮动时，父元素高度不能自动撑开，但父元素宽度依然束缚浮动元素
• 对兄弟元素产生影响，浮动元素之后的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下方，文本内容呈现环绕效果；对浮动元素之前的兄弟元素无影响

影响解决方法

1. 给父元素直接指定高度
2. 给父元素也设置浮动，但会带来其他影响
3. 给父元素设置overflow: hidden;
4. 在所有浮动元素最后添加一个块儿级元素，并给该块级元素设置css属性clear: both;
5. 给浮动元素的父元素设置伪元素，通过伪元素清除浮动，原理与方案四相同。推荐使用

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

tip: 布局中一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。