标准盒模型和IE盒模型开发者都知道，由于历史问题和既定标准的发展，有两种css盒模型。即W3C的标准盒模型和IE的怪异盒模型。在css中，可以使用box-sizing来定义元素的盒模型。在比较这两种盒子模型的区别之前，我们先看一张图：我们先不讨论宽高，我们把一个元素的组成分为：content,padding,border,margin。标准盒模型（box-sizing:content-box），这是W3C标准中默认的盒模型。它规定一个元素的宽高不包括padding和border，那么它在渲染时的宽高计算公式如下：width=contentwidth；高度=内容高度；IE盒模型（box-sizing:border-box），相反，它的宽高实际上包括了padding和border，所以width=contentwidth+padding+border；height=内容高度+padding+border；如图，演示地址请点这里，两款盒子模型的区别应该是很明显的。接下来说说BFC。什么是BFCBFC，即BlockFormattingContext，直译为“块级格式化上下文”。MDN上的定义是：块格式化上下文是网页可视化CSS渲染的一部分。它是块盒布局发生的区域，也是浮动与其他元素交互的区域。它是网页的可视化部分，是CSS渲染的一部分，是布局过程中产生块级框的区域，也是浮动元素与其他元素交互的区域。折叠边距意味着两个或多个相邻的边距（包括父元素和子元素）将合并为一个边距。边距的相邻性可以归因于以下两点：两个或多个边距没有被非空内容、padding、border或clear分隔开。这些保证金都是正常流动的。BFC原理浮动定位和清除浮动只会作用于同一个BFC中的元素。浮动不会影响其他BFC中元素的布局，而清除浮动只能清除同一个BFC中其前面元素的浮动外边距。Collapseonly会发生在属于同一个BFC的块级元素之间。因此，我们经常通过建立BFC来防止marginoverlap的发生。建立BFC可以通过以下方式使一个元素成为BFC：浮动（float的值不是none）绝对定位的元素（position的值是absolute或fixed）inlineblocks（display是inline-block）tableunits（displayistable,table-cell,table-caption等HTML表格相关属性)flexbox(显示为flex或inline-flex)overflow不可见BFC其他应用场景1.BFC计算高度时，它所包含的所有元素包含，包括浮动元素参与计算。所以甚至可以使用BFC来达到清浮的效果。创建BFC后：2.由于BFC和float元素不重叠，根据这个特点，可以实现自适应的两列布局。因为左边元素是浮动的，所以右边元素的背景布满了整个容器。将右侧元素改成BFC后：请点击BFC相关demo参考：https://segmentfault.com/a/1190000012265930http://w3help.org/zh-cn/kb/006/MDN:BFCMDN:Masteringmargincollapsing关于我微信号：rcgrcg，欢迎交友~为了生计，我也承接外包项目~网站建设（PC、H5、前后端全包，我们有团队）、APP开发（安卓）和IOS），都成功了哦这样。如果您有兴趣，请与我联系！！您满意的那种服务套餐！！祝你好运！2018-11-13厦门
