题外话但是很重要！！！**

1. 网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动**
2. 网页布局第二准则：先设置盒子大小，之后设置盒子的位置。

内容为笔者个人总结，有表达歧义之处，希望大家留言指出噢，会及时修改~~~

1. float是什么呢？

定义：

1. 指定一个元素应沿其容器的左侧或者右侧放置，也允许文本和内联元素环绕它；浮动后脱离网页正常文档流，但也保持部分的流动性（与绝对定位相反）。
2. 特点：浮动盒子不在保留原来的位置，同时具有行内块元素的特点。

2. 那么文档流又是什么呢？

文档流：文档中可显示对象在排列时所占用的位置/空间，脱离文档流指的是对象在页面中不占据位置。

1. float的取值：

（1）left：元素浮动在其所在的块容器左侧； （2）right：元素浮动在其所在的块容器右侧； （3） none：元素不浮动

2. float的原理：

（1）浮动元素使得元素脱离了文档，在页面中不占据位置； （2）浮动在碰到父元素的边框或者浮动元素的边框就会停止； （3）浮动不会重叠； （4）浮动只能左右放置； （5）浮动后块级元素会在同一行显示，行内元素可以设置宽高； （6）父元素没有设置宽度和高度时，宽度由内容撑开；

3. float的总结：

1. 当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素；
2. 浮动的元素是互相贴靠在一起的(不会有缝隙),若父级宽度装不下这些浮动盒子，多余的盒子会另起一行对齐。
3. 若行内元素有了浮动，则不需要转换block/inline-block就可以直接给高度和宽度。
4. 浮动元素经常和标准父级搭配使用： 网页布局一般策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
5. 浮动布局注意点：一个元素浮动了，理论上其余兄弟元素也要浮动，浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
6. 浮动的盒子不会有外边距合并的问题。

4. float的应用：

在网页中实现排版布局，比如想在一行内显示对应的标签元素，可以使用浮动属性，浮动可以将元素并排显示。、 浮动最典型应用：让多个块级元素一行内排列显示。

5. 清除浮动的方式：

1. 为什么要清除浮动：浮动元素不再占有原文档流的位置，所以会对后面的元素排版产生影响（父级元素很多情况下不适合给高度，但子盒子浮动又不占位置，最后父级盒子高度为0时，就会影响下边的标准流盒子）；
2. 若父元素本身有高度，则不需要清除浮动。 有下面5种方式清除浮动：
3. 设置父盒子的固定高度height(前提是要设置子盒子的高度)：用父盒子来包裹住子盒子；(常用用在盒子固定高度区域，比如固定的导航栏)，缺点：使用不灵活，后期不易维护。
4. 伪元素清除法：给受影响的元素添加clear属性，有三种取值，clear：left/right/both;
5. 利用overflow清除浮动：在父级元素的样式里面添加：overflow：hidden，注意这种情况父元素不能设置高度；
6. 空div法(内墙法)：在最后一个浮动的盒子后，添加一个空的块级元素(通常是div)，同时设置clear：both来清除浮动，同样父元素不能设置高度；
7. 伪对象法：对父标签添加伪类after，添加空的内容，并且使用clear：both； 常见写法：box为父元素（.box::after{ content:" "; display:block; clear: both;}）