一个基本的盒模型，包括content，padding，border，margin

在浮动布局中，父元素的高度默认是被子元素撑开的，所以高度塌陷是浮动布局中比较常见的一个问题，这个问题我们必须要进行处理！那么，兄弟元素div就会往上移动，破坏了页面结构

块级格式化上下?的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。个 BFC的两个相邻 Box垂直排列。元素的 margin box 的左边， 与包含块 border box 的左边相接触(?字层不会被浮动层覆盖，

在一个Web页面的CSS渲染中，块级格式化上下文 是按照块级盒子布局的。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个 BFC 中，块盒与行盒都会垂直的沿着其父元素的边框排列。块格式化上下文的行为通过一个简单的float示例很容易理

通常我们使用块级格式化上下文就能解决。块格式化上下文 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，并且容器元素不会影响兄

BFC，可以把BFC理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素。能够看到父元素没有被撑开，BFC规则第四条：计算BFC的高度时，浮动元素也参与计算所以我们要将父元素触发BFC. 如果，您认为阅读这篇博客让你有些收获，请您关注一下。感谢您的

Block Formatting Contexts ，就是 一个块级元素 的渲染显示规则。②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也

20190416期如何理解CSS中BFC?BFC 特性及应用同一个 BFC 下外边距会发生折叠代码理解。如果使触发容器的 BFC，那么容器将会包裹着浮动元素

让浏览器的爬虫和机器很好地解析。a、在html标签自定义属性"data-xxx",js可以通过dataset设置"data-xxx"自定义属性。a、创建了BFC的元素中，在垂直方向上的margin会发生重叠。b、BF

css盒模型概念css盒子模型又称框模型 ，包含了元素内容、内边距、边框、外边距几个要素。通常我们设置的背景显示区域，就是内容、内边距、边框这一块范围。而外边距margin是透明的，不会遮挡周边的其他元素。css外边距合并(叠加)两个上下方向相邻的元素框

CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的 CSS 布局能力。本文是关于块格式化上下文的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是 BFC，怎么工作以及如何创建 BFC 非常有用，这些可以帮助

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。BFC布局规则：1、内部的Box会在垂直方向，一个接一个地放置。属于同一个BFC的两个相邻Box的margi

通过选择器来定位DOM的元素,将各种样式规则应用在元素上,改变元素在页面上的显示方式使用方式: 内联样式 + 内部样式 + 外部样式盒模型。标准盒模型 = content +border + padding +marginIE盒模型 = content +

它是页面中的一块独立的渲染环境，并且有一套渲染规则，它决定了其子元素将如何定位，以及它和其他兄弟元素的关系和相互作用。5）bfc的高度计算时，浮动元素也参与计算。所以bfc会通过变窄来自适应，而不会与浮动元素发生重叠；

元素的类型和display的属性决定了Box的类型。属于同一个BFC中的两个相邻的Box上下margin会发生叠加。计算BFC的高度时，浮动元素也参与计算。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

CSS视觉格式化模型浏览器在解析渲染我们所写的html内容，顺序渲染。如果不特殊指定，浏览器会默认当前的HTML渲染是按文档流模式。盒模型是css渲染的时候抽象于html标签在画布所占有区域，由CSS引擎根据文档中的内容所创建。盒模型是有两种标准的，一个是

盒模型分为两种：。标准盒模型IE盒模型1.2 两种盒模型的区别：1.标准盒模型的宽高为内容区域的宽高 2.IE盒模型则宽高为 border + padding + 内容区。1) block-level box:display 属性为 block, list

CSS3圆角border-radius:属性值由两个参数值构成: value1 / value2，值之间用/分隔，value1代表圆角的水平半径，value2代表圆角的垂直半径盒阴影box-shadow:语法：box-shadow: 水平方向的偏移量 垂直

对于很多初学者来说，CSS是不讲“道理”的，但是如果去深究，会发现其实CSS是有一定道理的。比如说最常见的块级元素、内联元素、文档模型、层叠样式模型、盒子模型CSS等，但还有一种FC规范经常会被排除在CSS规范的认知之外。“FC”可以简单的理解为浏览器对于

BFC块级格式化上下文。如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动