BFC

---

BFC(块级格式化上下文)

作用

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

BFC布局规则

<1>同一个BFC下的Box在页面上垂直排列(一个块元素独占一行)
<2>BFC的区域不与float box重叠
场景：
两列布局:左边固定，右边自适应
<3>属于同一个BFC的两个相邻margin会发生重叠
场景：
--垂直方向相邻margin重叠
解决方案：
--父子margin重叠
解决方案：父元素开启BFC(让父子元素不处于同一个BFC)
<4>计算BFC高度时，浮动元素也参与计算
场景：清除浮动
--原理：当父元素开启BFC之后，在计算父元素的高度时，其中浮动的子元素也会参与计算

怎么产生BFC

<1>根元素(html /body)
<2>float不为none;
<3>position为absolute /fixed
<4>overflow不为visible
<5>display为inline-block /table

---

Haslayout

是IE的一个私有概念，决定了元素如何对其内容定位和尺寸进行计算，以及与其他元素的关系和相互作用。
一个元素“拥有布局”时，它会负责本身及其子元素的尺寸和定位。
如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。(在IE6 7中使用haslayout)

--默认拥有布局的元素
html, body, table, tr, td, img, hr,
input, select, textarea, button,
iframe, embed, object, applet, marquee

--触发haslayout
float: left或right
display: inline-block
position: absolute
width: 除auto外任何值
height: 除auto外任何值
zoom: 除normal外任何值
writing-mode: tb-rl

--在IE7中，以下属性也可以触发元素的haslayout
min-height: 任意值
min-width: 任意值
max-height: 除none 外任意值
max-width: 除none 外任意值
overflow: 除visible外任意值，仅用于块级元素
overflow-x: 除visible 外任意值，仅用于块级元素
overflow-y: 除visible 外任意值，仅用于块级元素
position: fixed