一、文档流(普通流/标准流)
*浏览器默认的标准就是文档流
*在CSS中分为块元素(垂直排版)、行内块元素（水平排版）、行内元素()。不同的元素有自己的排布规则
二、浮动流
1、
原文规范：In the float model, a box is first laid out according to the normal flow, then
taken out of the flow and shifted to the left or right as far as possible.
意思是：1）元素浮动后的位置由其浮动前在文档流中的位置决定(在文档流中是第几行，浮动后就在第几行)
2）浮动后会尽量向最左侧/最后侧放置，直到遇到元素边框或者其他浮动元素
*浮动元素字围现象：因为浮动是一种半脱离文档流的形式，元素会脱离文档流DOM，其他元素会占用它的位置。但是文字会依然为其留下位置
常应用在图文排版中
*只有水平排版(后浮动的元素在先浮动元素的后面，直到放置不开换行，所以浮动流中没有块元素与行内元素之分，都类似与行内块元素)
2、清除浮动方法
浮动影响：
1）如果父元素未设置高度，当子元素浮动后，造成父元素高度塌陷
2）浮动后会脱离文档流，后面的元素会向上移动，造成布局混乱、
方法：
1）*clear：left/right/both 实际上both就是消除对它影响最大的一侧 不推荐使用，因为clear本质就是闭合盒子不让内部的子元素出来
2）父元素设置over-flow：hidden.auto。不推荐使用，无法显示溢出的元素
3）*通过before伪类消除，推荐使用
注意：
*display：inline-block/table/table-cell/table-captions
*float:left/right
以上方式会开启BFC，但是依旧会造成布局混乱，不能用于清除浮动
原文：https://www.cnblogs.com/qqinhappyhappy/p/11546034.html