参考博文:http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html
BFC
1.产生BFC
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
2.BFC有什么作用
2.1不和浮动元素重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。
2.2清除元素内部浮动
在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。
2.3解决上下相邻两个元素重叠
第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。
生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器
IE haslayout
1.产生haslayout:
默认的元素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
css产生
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed
统一使用:建议使用 zoom: 1 来触发元素的 hasLayout 。
2.解决的问题
阻止外边距折叠
BFC
1.产生BFC
float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。
2.BFC有什么作用
2.1不和浮动元素重叠
如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。
2.2清除元素内部浮动
在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。
2.3解决上下相邻两个元素重叠
第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。
生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。所以解决这种问题的办法是要为两个容器添加具有BFC的包裹容器
IE haslayout
1.产生haslayout:
默认的元素
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
css产生
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，仅用于块级元素)
overflow-x: (除 visible 外任意值，仅用于块级元素)
overflow-y: (除 visible 外任意值，仅用于块级元素)
position: fixed
统一使用:建议使用 zoom: 1 来触发元素的 hasLayout 。
2.解决的问题
阻止外边距折叠
74
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
