1 块格式化上下文是用来对其元素进行定位，以及决定它和其他元素的关系和相互作用。
它的作用有三个：
（1）一旦某个元素触发了块格式化上下文属性，那么其里面的元素的边距就不会叠加，即块格式化上下文会阻止边距叠加；
（2）不会叠加浮动，比如一行中有3列，左列和右列都浮动，那么中间那一列只要触发了块格式化上下文，那么中间那一列就不会叠加浮动。即左，中，右三列都是独立的，并不会存在中间那一列作为背景，左列和右列浮动在在中间列上即叠加浮动的情况。这就是块格式化上下文不会叠加浮动的功能；
（3）块格式化上下文的第三个功能是它包含浮动，即它里面的子元素是浮动元素的情况下，父容器如果有块格式化上下文属性，那么父容器就可以管理子容器的属性，从而达到控制浮动元素的目的。因为一旦子元素是浮动的，那么它就不受父容器的控制了。而块格式化属性包含浮动，即是说他可以控制和决定子容器的属性。
触发块格式化上下文属性的方法如下（贴上更容易理解的英文原文）：
- the value of “float” is not “none”,
- the used value of “overflow” is not “visible”,
- the value of “display” is “table-cell”, “table-caption”, or “inline-block”,
- the value of “position” is neither “static” nor “relative”。
即：浮动元素（left,right）、绝对定位元素、inline-blocks、table-cells、table-captions 以及 'overflow' 值不是 'visible' 的元素，会创建 Block Formatting Context。
理解了这一点，就能很容易的解决页面布局中的一些奇怪的问题。不用在那里特恼火特困惑，我之前就遇到过类似的问题，差点去撞墙，因为怎么弄都不是~！
2.haslayout属性
相对于块格式化上下文，IE有其特有的layout属性，它决定了元素如何对其内容进行定位和尺寸计算。
- 触发方式：
- 默认拥有布局的元素：
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>
- 可触发 hasLayout 的 CSS 特性：
display: inline-block height: (除 auto 外任何值) (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值)
- IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：
min-height: (任意值) min- (任意值) max-height: (除 none 外任意值) max- (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed
- IE6 以前的版本（也包括 IE6 及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于 IE 5.5）， 通过设置任何元素的 'width' 或 'height'（非auto）都可以触发 hasLayout ； 但在 IE6 和 IE7 的标准模式中的行内元素上却不行，设置 'display:inline-block' 才可以。
- 默认拥有布局的元素：
hasLayout 和 block formatting context 的异同及可能产生的问题
1. 区别
- 在 IE8(S) 之前的版本中，没有规范中提及的 block formatting context 和 Inline formatting context 概念，而是用 hasLayout 来达到相似的目的。
- 在 IE 中可通过设置 'width'、'height'、'min-width'、'min-height'、'max-width'、'max-height'、 'zoom'、'writing-mode' 来触发 hasLayout，而这些特性值的设置不能够使元素创建 block formatting context。
- 在 IE 中很多元素默认就是拥有布局的，如 IPUNT, BUTTON, SELECT, TEXTAREA 等，但是这些元素在标准中会形成 Inline formatting context 。
2. 共同点
- 两者都是决定了对内容如何定位及大小计算的规则。
- 两者都决定了与其他元素的相互作用的规则。
- 'table-cell' 和 'table-caption' 既是 hasLayout 的元素，又是可以创建 block formatting context 的元素。
- 浮动元素，绝对定位元素，inline-block 元素以及除 'visible' 外任意值的 overflow(IE7) 在 IE 中可以触发 hasLayout，同时在标准中，又可以创建 block formatting context。
个人经验：我在写代码中最常见的是用zoom:1。
3.position有四个值：static,fixed ,absolute,relative.
static 就是元素在文档流中的原始位置，每个元素都会有个static值；fixed就是元素在屏幕可见区域上的位置不变，即始终会在屏幕的这个位置，比如当有滚动条的时候，此元素会随着屏幕的滚动而移动，但在屏幕上的位置不变；relative是元素的位置相对于它本身在文档流中的位置的偏移；absolute是元素的绝对定位，一旦绝对定位，这个元素就从文档流中独立出来了，他的位置不受文档流的控制。
总结：发现在写css过程中会经常遇到块格式化上下文的问题。所以明白了这个属性是多么的有意义！
给某些元素设置的样式不显示。这个时候肯定是类名或是id名写错了，或是标签中有没有闭合的标签。所以此时不要只是盯着出问题这个元素，而应该左右上下都看一下。综合考虑