在学习浮动布局和定位布局之前，先对“正常文档流”和“脱离文档流”就行了解，这两个概念，是深入学习浮动布局和定位布局的理论前提。
1：正常文档流
文档流：指元素在页面中出现的先后顺序。
正常文档流（普通流）：将一个页面从上到下分为一行一行，其中块元素独占一行，相邻行内元素在每一行中按照从左到右排列直到该行排满。
也就是说，正常文档流就是默认情况下页面元素的布局情况。
2：脱离文档流
脱离文档流：指的是脱离正常文档流。正常文档流就是我们没有使用浮动或者定位去改变默认情况下的HTML文档结构。若改变正常文档流，有两种方法：浮动和定位。
3：浮动
浮动，可以使得元素移到左边或者右边，并且允许后面的文字或元素环绕着它。浮动，最常用于实现水平方向上的并排布局，例如两列布局、多列布局。
float属性只有三个取值：left,right和none。
浮动特点：
（1）当一个元素定义了“float:left”或“float:right”时，不管这个元素之前是inline,inline-block或者其他类型，都会变成block类型。关于inline,inline-block和block的学习总结，在前面博客里有总结，可以查阅学习。浮动元素表现为块元素效果，可以定义width，height，padding和margin。可以使用margin-left或margin-right来定义浮动元素与其他元素之间的距离。
（2）当一个元素定义了“float-left”或"float-right"时，这个元素会脱离文档流，后面的元素会紧跟着填上空缺的位置。
4：浮动的影响
（1）对自身的影响
如果一个元素设置了浮动，则不管这个元素是什么类型，都会转化为块元素，也就是说display属性值为block。（关于display属性的学习总结在前面博客也总结十分详细，有需要查阅学习的可以阅读）
（2）对父元素影响
如果一个元素设置了浮动，它会脱离正常文档流。如果浮动元素的高度height大于父元素的高度height，或者父元素没有定义高度height，此时浮动元素会脱离父元素。也就是所谓的“父元素高度塌陷”。造成父元素高度塌陷的原因在于，父元素的高度小于子元素的高度，或者父元素没有定义高度，父元素不能把子元素包裹起来。
（3）对兄弟元素的影响
①兄弟元素是浮动元素
当一个浮动元素，它的兄弟元素也是浮动元素时，分两种情况。Ⅰ：同一方向的兄弟元素。Ⅱ：相反方向的兄弟元素
Ⅰ：同一方向的兄弟元素
当一个浮动元素碰到同一个方向的兄弟元素时，这些元素会从左到右、从上到下，一个接着一个紧挨着排列。
Ⅱ：相反方向的兄弟元素
当一个浮动元素碰到相反方向的兄弟元素时，这两个元素会移向两边（如果父元素宽度足够的话）。
②兄弟元素不是浮动元素
（4）对子元素的影响
如果一个元素是浮动元素（没有定义height），并且它的子元素也是浮动元素，则这个浮动元素会自适应地包含该子元素。
5：浮动的负作用
（1）父元素高度塌陷，从而导致边框不能撑开，背景色无法显示。
（2）页面布局错乱。
6：清除浮动
清除浮动，就是清除元素被定义浮动之后带来的脱离文档流的影响。
在CSS中，常见的清除浮动的方法有三种。
（1）clear：both
在CSS中，可以使用clear属性来清除浮动，clear属性取值有三个：left，right和both。
注意：clear属性不是应用于浮动元素本身，而是应用于浮动元素后面的元素。
（2）overflow：hidden
overflow：hidden应用于浮动元素的父元素，而不是当前的浮动元素。
（3）：：after
使用“clear:both”和“overflow：hidden”来清除浮动都有明显的弊端，在实际开发中，是使用“：：after伪元素”结合“clear：both”来实现。