浮动/BFC
2017-07-22 本文已影响0人
喵不吱
浮动
通过浮动，我们能很方便地布局，但是也会造成各种影响.
BFC
什么是BFC？
创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。
BFC的特性：
BFC布局规则：
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
引用
- 阻止外边距叠加
当两个相邻的块框在同一个 BFC 中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个 BFC ，那么它们的外边距就不会叠加。
防止外边距合并-1:给1或2加个 display:inline-block
两个兄弟元素每个包裹一层父元素，在父元素上设置overflow：hidden
- 不会重叠浮动元素
根据规定，一个 BFC 的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给 BFC 创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的 BFC 添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题——可以看这个测试用例）。
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
如图：浮动元素、普通元素与包含块的左边相接触
BFC的区域不会与float box重叠。
触发main生成BFC， 来实现自适应两栏布局
- 块级格式化上下文通常可以包含浮动
计算BFC的高度时，浮动元素也参与计算
撑满
详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots
总结
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。
- 当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
