浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
特点：
1. 浮动元素产生了浮动流，所有产生了浮动流的元素，块级元素看不到他们
2. 产生了bfc（block format context--块格式化上下文）的元素和文本类属性的元素（带有inline属性）
以及文本都能看到浮动元素；
如何触发一个盒子的bfc：
position:absoulte;
display:inline-block;
float:left/right;
overflow:hidden;
3. 如果多个元素浮动了，那么它们就会并排显示，如果是同一个方向的浮动，它们会贴在一起。
4. 如果一个元素浮动了，先向上移动，直到贴靠到父元素的边界，接着，如果是左浮动，就向左移动，直到移动到父元素的左边界，如果是向右浮动，就向右移动，直到移动到父元素的右边界。
5. 如果一个元素没有设置高度，它的高度是靠里面的内容撑起来的。如果父元素内部元素都浮动了，那么会造成父元素的高度塌陷。
6，父元素高度塌陷的解决方法:显示加高度（加高法）、 overflow:hidden
7. 如果父元素也浮动了，那么就不会出现高度塌陷。
8. 如果元素浮动了，它也会造成对后面的兄弟元素影响。解决：clear:both/left/right
9. 应用：实现两栏布局 导航 多个规则盒子水平排列（行内块）
10. 当一个浮动起来的块级元素没有设置width，那么这个盒子的宽高会尽可能小，小到包裹住它里面的内容，这叫包裹性，
11. 一个元素浮动了，它也是受父元素的控制。当父元素宽度变小时，装不下所有的子元素时，后面的子元素有贴靠性。当父元素小到极限时，里面的浮动的子元素宽度是不会改变的。
清除浮动
浮动布局容错性差，容易出现比较严重的布局问 题，还有一个原因就是 float 本身就是魔鬼属性，容易出现意料之外的情况，这里的意料之外 除了 float 属性自身特性（如父元素高度塌陷）导致的布局问题外，还包括诸多兼容性问题。
1，对父元素造成的影响
父元素高度塌陷
解决：显示加高度（加高法） overflow:hidden clear:both
加高法：简单 基本不用 大部分情况情况下，父元素的高度是需要子元素撑起来
overflow:hidden : 简单 使用了overflow:hidden 父元素的高度会随着子元素的高度变化而变化 overflow:hidden本职工作是用来处理溢出 在使用过程中，需要注意：子元素如果想要超出父元素高度，此时overflow:hidden就不适合了。
clear:both 在所有子元素后面加一个空的div 在这个div上面加clear:both ---> 内墙法
优点：简单，代码少，浏览器支持好，不容易出现怪问题 缺点：如果页面浮动布局多，就要增加很多空div
2，对后面兄弟元素造成的影响
兄弟元素会向上移动
解决：在受影响的元素上面的加 clear:both
项目中最常用清除浮动的方法： 利用伪元素after
.clear:after{
content="";
display:block;
clear:both;
height:0;
}
