CSS中的BFC

流体特性

块级元素，如div元素（下同），在默认情况下（非浮动、绝对定位等），水平方向会自动填满外部的容器；如果有 margin 或者 padding 或者 border 等，实际内容区域会响应变窄。

BFC：块级格式化上下文（Block formatting context ）。

它是一个独立的渲染区域，只有 Block-level box 参与， 它规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

BFC布局规则：

• 内部的盒子会在垂直方向，一个接一个地放置。
• 盒子垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻盒子的 margin 会发生重叠
• 每个元素的 margin 盒子的左边， 与包含块border 盒子的左边相接触。即使存在浮动也是如此。
• BFC 的区域不会与float 盒子重叠。
• BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• 计算 BFC 的高度时，浮动元素也参与计算

触发BFC：

• float 的值不为 none 。
• overflow 的值为 auto , scroll 或 hidden 。
• display 的值为 table-cell , table-caption , inline-block 中的任何一个。
• position 的值不为 relative 和 static。

使用场景：

• 场景一：左侧固定右侧自适应

  	<style>
  		.left{
  			width: 200px;
  			float: left;
  		}
  		.right{
  			margin-left: 200px; //必须大于左侧的宽度，否则无效果
  			overflow: hidden; //创建个BFC
  			display:block; //必须设置为块级元素，不然将不会撑满剩下部分
  		}
  	</style>
  	<div class='left'></div>
  	<div class='right'></div>
  

• 场景二：阻止垂直外边距（margin-top、margin-bottom）折叠

  按照 BFC 的定义，只有同属于一个 BFC 时，两个元素才有可能发生垂直 margin 的重叠，这个包括相邻元素，嵌套元素，只要他们之间没有阻挡就会发生 margin 重叠；因此要解决 margin 重叠问题，只要让它们不在同一个 BFC 就行了，但是对于两个相邻元素来说，意义不大，没有必要给它们加个外壳，但是对于嵌套元素来说就很有必要了，只要把父元素设为 BFC 就可以了。这样子元素的 margin 就不会和父元素的 margin 发生重叠；

参考链接：

• 张鑫旭：CSS深入理解流体特性和BFC特性下多栏自适应布局
• 梦想天空：前端精选文摘：BFC 神奇背后的原理

转载于:https://my.oschina.net/mayxu/blog/1593121