主要参考文档：http://www.zhangxinxu.com/wor...https://www.cnblogs.com/dojo-...测试示例：https://codepen.io/icyfanfan/...https://codepen.io/icyfanfan/...理解文档流对于理解CSS布局的其他相关概念很重要！！文档流将表单从上到下分行，每行元素从左到右排列，即文档流的每个非浮动块级元素独占一行，浮动元素浮动在根据规定向左或向右。在行的一端，如果当前行放不下，则另起一行，然后浮动内联元素不会独占一行，几乎所有元素（内联、块级等）都可以生成子行放置子元素有三种情况会让Element脱离文档流，分别是浮动、绝对定位和固定定位。但是在IE中，浮动元素也存在于文档流中。浮动元素不占用任何正常的文档流空间，浮动元素的定位仍然是基于正常的文档流，然后从文档流中提取出来，并尽可能向左或向右移动。文本内容将环绕浮动元素。当一个元素从正常的文档流中抽取出来时，其他还在文档流中的元素会忽略该元素并填充其原来的空间根据文档流理解定位方式：相对定位，即相对于元素的位置元素在文档流中的偏移量。但保留原来的占位符。绝对定位，即完全脱离文档流，相对于最近的具有position属性非静态值的父元素进行偏移。固定定位，即完全脱离文档流，相对视口偏移。块级元素BLOCK-LEVELELEMENT标签：div特点：一个元素占一行，可以设置宽度、高度、行高、边框、内外边距，无需设置宽度万一，宽度自动填满外层容器，可以容纳其他块级元素或内联元素。具有流体属性的块元素。屏蔽水平元素，比如div元素，默认（未定义宽度，非浮动绝对定位等），水平方向会自动填充外层容器；如果有margin-left/margin-right，padding-left/padding-right，border-left-width/border-right-width等，实际内容区域会相应缩小。内联元素INLINEELEMENT标签：span特性：与其他内联特性元素在同一行，不能设置行布局形式。将设置一行（与块级元素相比），它可以容纳文本或其他内联元素。行内块级显示：inline-block特点：对象被渲染为行内对象，但是对象的内容被渲染为块对象。与其他内联对象和块级元素显示在同一行，可以设置宽度、高度、内外边距等。在内部，可以容纳FormattingContext：指页面中的一个渲染区域，有一个一组渲染规则，它决定了它的子元素如何定位，以及与其他元素的相互关系和作用。BFC-BLOCKFORMATTINGCONTEXBFC元素特征表达的原则是无论内部子元素如何汹涌，外部元素都不会受到影响。因此，避免保证金穿透和明确浮动很容易理解。来自张新旭的博客原话：一个独立的块级渲染区域，只有Block-levelbox参与，这个区域有一套渲染规则来约束block-levelbox的布局，内部布局不会受外部影响且不会对外有任何影响影响如何生成BFC：float的值不为none，overflow的值不为auto，scroll或hiddendisplay的值为table-cell，table-caption或inline-block（测试时发现display:table也会触发BFC，table会默认生成一个匿名table-cell，而生成BFC的正是这个匿名table-ccell）position的值不是相对的或静态BFC规则生成的BFC元素的子元素将被一一放置。垂直方向它们的原点是包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的边距属性。BFC中相邻的块级元素边距折叠。在生成的BFC元素的子元素中，每个子元素都有一个边距触及包含块的左边界，（对于从右到左的格式，右边距触及右边界），甚至是浮动元素。元素的内容区域会被float压缩），除非这个子元素也创建了一个新的BFC（比如它本身就是一个float元素）。分析：内部的Boxes会在垂直方向依次放置。垂直方向的距离由边距决定。（完整的说法是：属于同一个BFC的两个相邻Boxes的外边距会重叠，不管方向如何。）每个元素的左外边距触及包含块的左边界（从左到右），即使浮动元素也是如此。（这意味着BFC中的子元素不会超出其包含块，position为absolute的元素可以超出其包含块的边界。）BFC的区域不会与的元素区域重叠漂浮。在计算BFC的高度时，浮动子元素也会参与BFC的计算，是页面上一个孤立的、独立的容器。容器内部的子元素不会影响外部元素，反之亦然。让我回忆一下之前学过的一些布局知识。垂直方向相邻的两个div边距重叠：其实在同一个bfc环境下，设置父元素overflow:hidden或者浮动父元素可以清除浮动的效果：其实就是让父元素触发bfc，让子元素参与父元素的高度计算BFCapplicationtopreventmarginoverlap:overlapwilloccur将元素放在两个BFC中（或者让其中一个生成一个BFC）来清除浮动：略布局：采取利用BFC区域不会与浮动元素区域重叠，方便多列布局
