浮动的效果
**浮动 之后会怎么样？ **
- 浮动定位元素会被排除在文档流之外-脱离文档流(不占据页面空间),其余的元素要上前补位
- 浮动元素会停靠在父元素的左边或右边，或停靠在其他已浮动元素的边缘上(元素只能在当前所在行浮动)
- 浮动元素依然位于父元素之内
- 浮动元素处理的问题-解决多个块级元素在一行内显示的问题
**注意 **
- 一行内，显示不下所有的已浮动元素时，最后一个将换行
- 元素一旦浮动起来之后，那么宽度将变成自适应(宽度由内容决定)
- 元素一旦浮动起来之后，那么就将变成块级/inline-block 元素,尤其对行内元素，影响最大 (块级元素：允许修改尺寸;行内元素：不允许修改尺寸)
- 文本，行内元素，行内块元素时采用
环绕的方式来排列的，是不会被浮动元素压在底下的，会巧妙的避开浮动元素
**浮动 之后会有什么样的影响？ **
由于浮动元素会脱离文档流，所以导致不占据页面空间，所以会对父元素高度带来一定影响。如果一个元素中包含的元素全部是浮动元素，那么该元素高度将变成0（高度塌陷）
清除浮动
添加 clear 样式的元素，会规定他允许在哪一侧存在浮动元素。
- 直接手动设置其高度，但是前提是知道父元素的高度
- 在父元素尾部追加空元素，设置其
clear: both - 设置父元素浮动，但是父元素后续元素可能会出现问题
- 设置父元素的
overflow: auto/hidden - 使用伪元素
.clearfix:after{ content: ''; display: block; clear: both }
设置父元素的 overflow, float 本质上是在父元素产生 BFC，而 BFC 的高度计算会包括浮动元素
