写这篇文章的起因是源于这篇文章：谈谈面试与面试题 中关于position的讨论，文中一开始就说的这句话：面试的时候问个css的position属性能刷掉一半的人这是啥情况……其实这问题我本来打算的是可以顺着一路扯到normal fl ...
写这篇文章的起因是源于这篇文章：谈谈面试与面试题 中关于position的讨论，文中一开始就说的这句话：
面试的时候问个css的position属性能刷掉一半的人这是啥情况……
其实这问题我本来打算的是可以顺着一路扯到normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，这样一路问下去的，奈何第一个问题（亲我真的只问了position有哪些取值和行为啊）就悲剧了……
说到position，那么稍微对css有所了解的必然能马上说出它的四个属性值：static 、relative、absolute、fixed。但是更深一步去讨论，牵扯出诸如上文提到的normal flow、containing block、bfc、margin collapse，base line，writing mode，bidi，又有多少人能很好的回答完整呢，所以我想在此做一个自己的总结归纳。
1.normal flow
normal flow(正常流):正常流是默认的定位方式。任何没有具体指定{position:absolute}或者{position:fixed}属性以及没有被浮动的元素都将默认获得此属性。
在这种方式里，块级元素在它们的包含块里一个一个垂直延伸，行内元素在它们的包含块里从左至右的水平排布。
值得注意的是，在正常流里垂直边距（vertical margin）是重叠的。也就是说，上下两个块级盒之间的边距由它们之中边距较大的元素决定，而不是他们的和！
1 <head> 2 <style> 3 div 4 { 5 width: 200px; 6 height: 100px; 7 border: 1px solid #00A4CC; 8 } 9 10 span11 {12 border: 2px solid #00ff00;13 }14 </style>15 </head>16 17 <body>18 <div>19 <span> 我会掉到下一行我会掉到下一行我会掉到下一行</span>20 </div>21 </body> 效果显示如下：
2.containing block
containing block（包含块）：是视觉格式化模型的一个重要概念，它与框模型类似，也可以理解为一个矩形，而这个矩形的作用是为它里面包含的元素提供一个参考，元素的尺寸和位置往往是由该元素所在的包含块决定的。也就是说一个元素盒子的位置和大小有时是通过相对于一个特定的长方形来计算的，这个长方形就被称之为元素的 containing block。
一个元素的containing block按照以下方式定义：
用户代理（比如浏览器）选择根元素作为 containing block（称之为初始 containing block）。
对于其它元素，除非元素使用的是绝对位置，containing block 由最近的块级祖先元素盒子的内容边界组成。
如果元素有属性 'position:fixed'，containing block 由视口建立。
如果元素有属性 'position:absolute'，containing block 由最近的 position 不是 static 的祖先建立，按下面的步骤：
5.如果没有祖先，根元素盒子的内容边界确定为 containing block。
名词解释：
视口：通过解析文档，连续媒体（比如屏幕就是连续媒体，而打印机则是基于页的媒体）给用户产生一个视口（一个窗口或其它在屏幕上显示的区域）。
根元素：源文件中，每一个元素都有一个父元素，只有一个例外，它就是根元素。
padding edge：请参见下图：
举个板栗：
1 <style> 2 body { 3 position: relative; 4 } 5 6 .aside { 7 width: 100px; 8 height: 150px; 9 float: left;10 background: #f66;11 }12 13 .main {14 height: 200px;15 background: #fcc;16 }17 </style>18 <body>19 <div ></div>20 <div ></div>21 </body> 效果如下：
根据BFC的规则：
每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）
所以，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
因此，我们可以根据：
BFC的区域不会与float box重叠。
来通过触发main生成BFC，实现自适应两栏布局。
1 .main {2 overflow: hidden;3 } 1 <head> 2 <title>Clear float</title> 3 <style> 4 .container{ 5 margin: 30px auto; 6 width:600px; 7 height: 300px; 8 } 9 .wrapper{10 border:solid 3px #a33;11 }12 .main{13 width: 100px;14 height: 100px;15 background-color: #060;16 margin: 10px;17 float: left;18 }19 </style>20 </head>21 <body>22 <div >23 <div >24 <div ></div>25 <div ></div>26 <div ></div>27 </div>28 </div>29 </body> 希望的结果是：
但结果是：
父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象，除了用传统的伪类方法。根据
计算BFC的高度时，浮动元素也参与计算
还可以使父容器形成BFC，来清除浮动，简单修改一下代码：
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：包含块、BFC、margin collapse
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
