关键词：
标准盒模型与IE盒模型
开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，可以用box-sizing去定义元素的盒模型。
比较这两个盒模型的差异之前，我们先来看一张图：
先不讨论宽高，我们把一个元素的组成分为：content、padding、border、margin。
标准盒模型（box-sizing: content-box），即W3C标准中默认的盒模型。它规定，一个元素的宽高并不包含padding和border，那么它在渲染时的宽高计算公式如下：
width = content width;
height = content height;
IE盒模型（box-sizing: border-box），则恰恰相反，它的宽高实际上是包含padding和border的，所以
width = content width + padding + border;
height = content height + padding + border;
如图，demo地址请点击
至此，两种盒模型的区别应该挺明白的了吧。接下来我们讲讲有关BFC的东西。
什么是BFC
BFC，即 Block Formatting Context 直译为 “块级格式化上下文”。MDN上的定义为：
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.其是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域
深入了解 BFC 之前，我们看看，什么是 “外边距重叠”。
外边距重叠（Collapsing margins），指的是毗邻的两个或多个外边距 (包括父子元素) 会合并成一个外边距。其中所说的 margin 毗邻，可以归结为以下两点：
- 这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
- 这些 margin 都处于普通流中。
BFC原理
- 浮动定位和清除浮动时只会应用于同一个BFC内的元素
- 浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动
- 外边距折叠也只会发生在属于同一BFC的块级元素之间
因此，我们常常通过建立BFC来防止外边距重叠的发生。
建立BFC
通过以下方式可以使元素成为一个BFC：
- 浮动（float的值不为none）
- 绝对定位元素（position的值为absolute或fixed）
- 行内块（display为inline-block）
- 表格单元（display为table、table-cell、table-caption等HTML表格相关属性）
- 弹性盒（display为flex或inline-flex）
- overflow不为visible
BFC其他应用场景
1、由于BFC在计算高度时，其所包含的所有元素，包括浮动元素都是参与计算的。所以甚至可以使用BFC来达到清除浮动的效果。
创建BFC之后：
2、由于BFC与float元素是不会发生重叠的，根据这个特性，可以做到自适应两栏布局。由于左边元素浮动，造成右边元素的背景沾满了整个容器。
将右边元素改成BFC之后：
BFC相关demo请点击
参考：
关于我
微信号：rcgrcg，欢迎交友～
为了生计，我也接外包项目的哦～
网站搭建（PC、H5、前后端全包，我们有团队的哦），APP开发（安卓和IOS），都是有成功案例的哦。
有兴趣的请联系我！！服务包您满意的那种！！
Good luck！
2018-11-13 厦门
深入理解css盒模型
如果你在面试的时候面试官让你谈谈对盒模型的理解，你是不是不知从何谈起。这种看似简单的题其实是最不好答的。 下面本文章将会从以下几个方面谈谈盒模型。基本概念：标准模型和IE模型CSS如何设置这两种模型JS... 查看详情
css盒模型深入理解(代码片段)
前言所有文档元素都生成一个矩形框，这称为元素框(elementbox)，它描述了一个元素在文档布局中所占的空间大小。而且，每个框影响着其他元素框的位置和大小宽高宽度width被定义为从左内边界到右内边界的距离，高度height被定... 查看详情
css盒模型——bfc
BFC定义BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干。在解释什么是BFC之前，我们需要先知道Box、Format... 查看详情
学习总结：css块级与行级元素特性盒模型层模型bug与bfc浮动模型(代码片段)
.displayTalwidth:100%;font-size:13px.displayTal1width:30%;height:30px;font-size:13px;color:#009933.displayTal2width:40%;height:30px;font-size:13px;color:#009933.displayTal3width:30%;height:30px;font-size:13px;color:#009933.positionTalwidth:100%.positionTal1width:15%;height:30px;font-size:13px;color:... 查看详情
css盒模型与bfc与布局与垂直水平居中与css设计模式等
...able布局上下文下的布局cssgrid布局上下文下的布局1、css盒模型页面上显示的每个元素（包括内联元素）都可以 查看详情
深入理解弹性盒布局（fiex-box）——web前端系列自学笔记(代码片段)
文章目录弹性盒布局弹性盒布局概述弹性盒布局属性displayflex-flowjustify-contentalign-itemsorderflexalign-self总结弹性盒布局小案例实现效果图使用弹性盒布局建设个人社交网站弹性盒布局弹性盒布局概述说到响应式，就不得不提CSS3... 查看详情
盒模型(代码片段)
...margin的兼容问题overflow文本溢出的处理方式background盒模型理解：HTML元素可以看成一个大仓库，盒子与盒子之间的间距是外边距（margin），盒子里面与货物之间泡沫叫内边距（padding），货物本身的有宽高（width/height）子本身的厚... 查看详情
深入理解css弹性盒模型flex
×目录[1]版本更迭[2]display[3]基本概念[4]伸缩容器[5]伸缩项目前面的话 CSS3引入了一种新的布局模型——flex布局。flex是flexiblebox的缩写，一般称之为弹性盒模型。和CSS3其他属性不一样，flexbox并不是一个属性，而是一... 查看详情
深入理解css3弹性盒布局模型
...具体开发中应用该布局模型来简化常见的页面布局场景。深入理解CSS3弹性盒布局模型We 查看详情
深入理解css3弹性盒布局模型
弹性盒布局模型（FlexibleBoxLayout）是CSS3规范中提出的一种新的布局方式。该布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。这种布局方式在条目尺寸未知或动... 查看详情
深入理解jvm虚拟机读书笔记——内存模型与线程(代码片段)
注：本文参考自周志明老师的著作《深入理解Java虚拟机（第3版）》，相关电子书可以关注WX公众号，回复001获取。1.Java内存模型JMM概述：Java内存模型指的是JMM，而不是运行时数据区哦~Java语言为了保证... 查看详情
深入理解jvm虚拟机读书笔记——内存模型与线程(代码片段)
注：本文参考自周志明老师的著作《深入理解Java虚拟机（第3版）》，相关电子书可以关注WX公众号，回复001获取。1.Java内存模型JMM概述：Java内存模型指的是JMM，而不是运行时数据区哦~Java语言为了保证... 查看详情
[布局概念]关于css-bfc深入理解
BFC是什么鬼？BFC概括：可以在心中记住这么一个概念———所谓的BFC就是css布局的一个概念，是一块区域，一个环境。先稳住别懵逼，接着往下走。关于BFC的定义：BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立... 查看详情
从cpu说起，深入理解java内存模型！(代码片段)
Java内存模型，许多人会错误地理解成JVM的内存模型。但实际上，这两者是完全不同的东西。Java内存模型定义了Java语言如何与内存进行交互，具体地说是Java语言运行时的变量，如何与我们的硬件内存进行交互的。... 查看详情
前端面试问题（持续更新）(代码片段)
1、有关BFC的理解2、盒模型的理解3、box-sizing的理解4、渐进增强VS优雅降级5、url->页面加载完成的整个流程6、js组成部分7、如何跨域访问8、js判断数组9、严格模式10、ajax的优缺点11、HTML、XML、XHTML有什么区别12、html语义化13、... 查看详情
java内存模型与线程深入理解java虚拟机总结(代码片段)
在许多情况下，让计算机同时去做几件事情，不仅是因为计算机的运算能力强大了，还有一个很重要的原因是计算机的运算速度与它的存储和通信子系统速度的差距太大，大量的时间都花费在磁盘I/O、网络通信或者数据库访问上... 查看详情
前端基础面试题之语义化+块级元素和内联元素+css布局盒模型(代码片段)
HTML语义化块状元素和内联元素CSS盒模型BFC理解与应用对于BFC\\color#FF0000BFCBFC的布局方式，会在下一篇博客中详细进行介绍，这个知识点在CSS布局中还是很重要的。https://blog.csdn.net/u012396955/article/details/111315837圣杯布局和双... 查看详情
前端基础面试题之语义化+块级元素和内联元素+css布局盒模型(代码片段)
HTML语义化块状元素和内联元素CSS盒模型BFC理解与应用对于BFC\\color#FF0000BFCBFC的布局方式，会在下一篇博客中详细进行介绍，这个知识点在CSS布局中还是很重要的。https://blog.csdn.net/u012396955/article/details/111315837圣杯布局和双... 查看详情