【css3】BFC

BFC

1. 定义：BFC(Block formatting context)直译为\"块级格式化上下文\"。它是一个独立的渲染区域，只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。布局规则：​	A. 内部的Box 会在垂直方向，一个接一个地放置。​	B. Box垂直方向的距离由 margin决定。属于同一个 BFC的两个相邻 Box的 margin 会发生重叠。​	C. 每个元素的 margin box 的左边，与包含块border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。​	D. BFC 的区域不会与 float box 重叠。​	E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。​	F. 计算 BFC 的高度时，浮动元素也参与计算。2. 哪些元素会生成 BFC：A. 根元素B. float 属性不为 noneC. position为 absolute 或 fixedD. display为inline-block， table-cell， table-caption， flex， inline-flexF. overflow 不为 visible

清除浮动

1. 父级div定义 height原理：父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。 简单、代码少、容易掌握 ，但只适合高度固定的布局.2. 结尾处加空 div标签 clear：both原理：在浮动元素的后面添加一个空div兄弟元素，利用 css 提高的clear：both清除浮动，让父级div能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很不好 .3. 父级div定义 伪类：after 和 zoom/*清除浮动代码*/.clearfix：after{content：\"\"；display：block；visibility：hidden；height：0；line-height：0；clear：both；}.clearfix{zoom：1}原理：IE8以上和非 IE浏览器才支持：after，原理和方法 2有点类似，zoom(IE专有属性)可解决ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少CSS 代码。4. 父级div定义 overflow：hidden超出盒子部分会被隐藏，不推荐使用.5. 双伪元素法：.clearfix：before，.clearfix：after {content： \"\"；display： block；clear：both；}.clearfix {zoom： 1；}