什么是BFC
你知道吗？在网页设计里有个叫“BFC”的家伙很关键！它就像个大管家，帮我们搞定网页排版和元素定位这点事儿，还能解决很多样式问题！所以，咱们得好好研究研究这个BFC到底是啥意思、都有些什么神奇功能、发挥了怎样的作用。
BFC的定义
BFC就是一个独立的小范围，它指定了里头的块状盒子怎么摆放，也能影响到外面的东西。简单来说，它决定了各个元素怎么定位和跟别的元素怎么配对。在HTML里，每个元素都得在BFC或者不在BFC里待着。
在W3C网站里有个手册叫“BFC详解”，它说看起来像个箱子或者盒子的元素决定BFC，那些像纸条似的元素决定IFC（就是行内格式上下文啦）。这样一分，大家就能明白网页上各种元素到底是怎么排队站位的。
BFC的特性
Document
要了解BFC，得先清楚它有哪些特性。MDN就列举了几点能激发BFC产生的情况，比如说浮动，绝对定位，还有 overflow属性非 visible这种。满足这些条件的元素就能搞出个自己独有的BFC来，还能影响到周围元素的布局。
BFC的作用
解决margin重叠问题
当我们在两个垂直排列的紧挨着的容器中间加margin时，常常会遇到麻烦——它们竟然会相互覆盖！为了解决这个问题，你可以试试用BFC。简单说就是，把那些容易产生margin重叠问题的元素分放在不同的BFC里面，这样就能避免乱七八糟的布局了。
Document
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
简单来说，就是如果有两个盒状物（element）like box1和box2，它们放在一起，而且它们的边距都是设定好的，但是又挂在同一个大大的爸爸（container）上，过年的时候一股脑都挤到一起，就会造成没法识别的冲突。这时候，我们可以为其中之一加一层“罩子”，比如利用overflow属性来弄出一片独立的小天地（BFC），这样就能消除这种冲突！
解决浮动高度塌陷问题
有时候，你会发现册子里的浮动元素会让整个部分变矮。这种情况下，册子本身就没法准确算出它到底应该有多高。因此，内容看起来就乱七八糟的。不过得益于HTML的特性，我们只需轻轻一点就能搞定这个问题！首先，我们利用容器来构建一个全新的“区域”（BFC），这会让册子重新计算身高~这样，一切就恢复正常！
Document
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
overflow: hidden;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
来说说，就是在W3C规定里，如果一个BFC的高度设置成自动模式（auto），那它就会去看里面的block盒子有多高。所以，只要给这个容器加上 overflow 属性并激活一个新 BFC，那么它就可以再次算出高度，把里面的浮动元素边界都包括进去，这样就能轻松避免高度错乱。
通过这些例子，我们能看出，在做网站前端的时候，用好用活这个BFC机制能搞定很多咱们平时一头疼就容易出现的排版错误和困扰，让网页看起来更舒服，也让用户体验更好！
结语
掌握了啥叫BFC和它咋发挥作用以后，你在搞前端就能更好地应对各种布局问题。善用BFC不仅能让网页运行更顺畅，还可能避免一些难看的错误。希望这篇文章对你们有启发，在实际应用中派上用场。
Document
/* 给box1外层增加一个container盒子，并设置BFC */
.container {
overflow: hidden;
}
.box1 {
height: 200px;
width: 400px;
background-color: orange;
margin-bottom: 30px;
}
.box2 {
height: 150px;
background-color: purple;
margin-top: 50px;
}
。
评论0