前端程序员在布局页面时，经常会遇到各种烦人的小问题，比如：每个元素都是一个盒子，盒子外的父元素应该不会受到盒内子的子元素影响，可是事实是这样的吗？
往往，我们会看到子元素浮动后，父元素高度没有了，两栏布局时右侧没有自适应，垂直方向上上下两个元素外边距不太对
从常理上来说，被包含在父元素里的元素是不会影响到父元素旁边的元素，但实际上并不总是如此，那么有没有什么办法能让里面的元素和外部真正隔离开呢？
==> 解决办法就是：BFC
BFC = Block Formatting context 意思是“块级格式化上下文”，W3C的解释是：它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。
其实，我们只要记住：BFC的目的就是：形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。如何才能形成这样一个神奇的空间呢？我们通过CSS为元素设置一些属性，就能触发，常用的有四种：
- float不为none
- postion不为relative和static
- overflow为auto scroll和hidden
- display的值为inline-block
在知道触发规则之后，我们再来看下能解决什么问题呢？
- 解决浮动元素令父元素高度塌陷的问题
如，父元素div包含几个子div，这几个子元素都为浮动时，父元素高度坍塌，这是因为浮动的子元素脱离了文档流，漂浮于父元素之上，父元素检测不到子元素的存在，获取不到子元素高度，所以看起来父元素没有高度了。父元素后面的布局也就乱了，这时，可以给父元素添加属性overflow：hidden，当然，这只是一种BFC的做法，还可以display: table-cell;或position: fixed;或position: absolute;
触发了BFC的容器就是页面上的一个完全隔离开的容器，容器里的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的父元素在计算高度时，不得不让浮动的子元素也参与进来，变相的实现了清楚内部浮动的目的。
但有的时候出于布局需要也可能无法给父元素设置这些属性，解决高度坍塌还有让父元素也浮动起来，或添加一个高度，但这种适用于已知道子元素高度
-
解决自适应布局的问题
PC端的网页，左右两栏布局很常见，一般左侧定宽，右侧主体页面宽度自适应变化，通常是用浮动来实现的；它利用了块级元素占满一行的特性，使得右边的元素可以随着页面宽度的变化而变化，又利用了浮动的特性，让左侧元素覆盖在右侧元素上方，同时还能挤开下方元素的内容，让页面看起来是两栏的效果，但随着右边元素的增加，超出了左边元素的高度后，文字就会环绕左侧元素，这显然不是我们想要的效果，因为右侧元素触发了BFC，触发BFC的容器就是页面上的一个完全隔离开的容器，容器中的子元素绝对不会影响到外面的元素，为了保证这个规则，触发了BFC的右侧元素为了将内部元素和左侧浮动元素隔离开，不得不形成这样左右完全隔离的两栏，同时，如果右侧元素依旧是块级元素，那么他尽可能占满一行的特性还在，这样就保证了右侧元素依旧是自适应的 -
解决外边距垂直方向重合问题
垂直方向上两个兄弟元素外边距会取最大值，而不是取和，那么我们可以通过触发BFC来防止他们之间相互影响。为其中一个元素的外边包裹一层父元素，并且触发父元素BFC，比如：overflow：hidden，这样打破原有格局，就不再会重叠啦！
另外我们可以用padding来代替marging，有点是简单易懂，缺点是如果根据设计本来就需要设置padding样式，那就没办法用了
总结一下，触发BFC可以解决：
- 浮动元素的父元素高度塌陷
- 两栏自适应布局
- 外边距垂直方向重合
网友评论