BFC 首先BFC的英文全称Block Format Context，也就是块级格式化上下文。 BFC特性 首先，我们大家都知道的BFC特性： 内部的元素会在垂直方向，从顶部一个接一个的放置 Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。 每个元素 ...
分类：
其他好文 时间：
2020-06-01 12:09:37
阅读次数：
55
BFC的定义 BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部元素的变化也不会影响到BFC内部元素，这就跟结界一样，你可以理解为有一个很强的护盾在包裹着BFC元素，这也是为什么BFC元 ...
分类：
Web程序 时间：
2020-05-31 17:38:19
阅读次数：
68
定义 BFC全称为block formatting context，意为块级格式化上下文，是Web页面中盒模型布局的css渲染模式。 可能上面的解释看了有点懵逼，通俗的说BFC指的的是一块区域的布局， 这个区域的布局有一个显著特点：这个区域内的子元素无论使用何种布局、何种样式都不会影响外部的元素。B ...
分类：
Web程序 时间：
2020-05-31 12:44:23
阅读次数：
56
前文 这是的一个经典的老问题，因为之前刚好有读者朋友问到，顺便整理一下。 从一个简单例子说起 先看一个简单示例： <style> .slide1 div { margin:10px 0; } </style> <div class="slide1"> <h3>第1种外边距折叠：兄弟元素</h3> < ...
分类：
Web程序 时间：
2020-05-31 10:58:30
阅读次数：
71
现在有flex布局等新技术，bfc的效果比如包住元素，进行自适应布局等已经不需要了。现在只有免式的事后才需要知道BFC！ 看不懂的定义 CSS规范中对 BFC 的描述 9.4.1 块格式化上下文 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table ...
分类：
Web程序 时间：
2020-05-31 10:46:40
阅读次数：
79
一：BFC (Block Formatting Context)定义 BFC 全称 Block Formatting Context，翻译块级格式化上下文。BFC 可以看作是隔离了的独立容器（渲染区域），容器里面的元素不会在布局上影响到外面的元素，相当于建立一个隐形的边界 前提：每个渲染区域用for ...
分类：
其他好文 时间：
2020-05-30 21:51:08
阅读次数：
100
标准盒模型与IE盒模型 开发者们都知道，由于历史遗留问题与既定标准的发展，存在着两个css盒模型。即W3C的标准盒模型以及IE的怪异盒模型。在css中，可以用box-sizing去定义元素的盒模型。 比较这两个盒模型的差异之前，我们先来看一张图： 先不讨论宽高，我们把一个元素的组成分为：conten ...
分类：
其他好文 时间：
2020-05-30 21:38:56
阅读次数：
56
什么是BFC？ 全称块级格式化上下文？什么意思不懂。看了好多博客，基本都是抄的，真心都不是大白话。我今天来总结一下，用菜鸟级别的语言来描述。 BFC 应该可以抽象成一个 独立的个体，出淤泥而不染的白莲花。 是的不受其他元素的影响，始终保持自己独立。就是正常的普通流布局规则，设置的样式是什么样的，就按 ...
分类：
其他好文 时间：
2020-05-30 20:05:23
阅读次数：
76
BFC（block formatting context）块级格式化上下文。 如果一个元素具有 BFC，内部子元素无论如何都不会影响外部的元素。所以，BFC 元素是不可能发生 margin 重叠的，因为 margin 重叠是会影响外面的元素的; BFC 元素也可以用来清除浮动的影响，因为如果不清除， ...
分类：
Web程序 时间：
2020-05-30 16:06:35
阅读次数：
79
BFC的定义 BFC到底是个啥呢？先贴出一段大佬们在分析BFC的时候字面上的理解： 在CSS布局中，是通过对一个个box的布局，来实现整体页面的布局，这一个个box也就是一个个容器元素，这些元素分为两类：块级元素(block)，行内元素(inline)。 对于不同类型的元素，有不同的处理规则，这个元 ...
分类：
其他好文 时间：
2020-05-28 00:48:54
阅读次数：
86
