关键词：
BFC(Block Formatting Context)块级格式化上下文，是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
BFC的特性：
1. 属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠
2. BFC的区域不会与浮动元素的区域重叠
3. BFC的高度包含浮动子元素的高度
4. BFC在页面上是一个独立的容器，里外的元素不会互相影响
5. 每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
创建BFC：
1. float值不为none
2. position的值不是static或raletive
3. display属性 为table table-cell...
4. overflow: auto hidden scroll (不为visible)
BFC使用场景：
1. 去除边距重叠现象
2. 清除浮动（让父元素的高度包含子浮动元素）
3. 避免某元素被浮动元素覆盖
4. 避免多列布局由于宽度计算四舍五入而自动换行
css常见样式总结之水平垂直居中方案及bfc小结
...头。针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。首先通过一个思维导图更直观的展示:水平居中对于行内元素：text-align:center;对于确定宽度的块级元素：widt 查看详情
对bfc的深层理解及应用
...x/inline-flex 5.position的值为absolute或者fixed三、BFC的一些特性 1.Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠<styletype="text/css">.box1width:200px;height:200px;margin-bottom:50px;background:pink;.box2width:200px... 查看详情
揭开css中bfc的面纱
...的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（BlockFormattingContext）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一... 查看详情
bfc的形成条件和特性分析
...有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。什么是BFCBFC（Blockformattingcontexts），翻译过来就是块级格式化上下文，指的是一种上下... 查看详情
元素的bfc特性与自适应布局
...gContext",中文为"块级格式化上下文"。记住一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻雨覆雨都不会影响外部的元素。所以，避免margin穿透、清楚浮动什么的也就好理解了。什么时候出发BFC呢？常见的情况... 查看详情
bfc生成特性解决的问题
BFC( 块级格式化上下文 ) 块级格式化上下文，它是指一个独立的块级渲染区域， 只有 Blocklevel BOX 参与，该区域拥有一套 渲染规则来约束块级盒子的布局，且与区域外部无关. 如何生... 查看详情
css学习_cssbfc特性（块级格式化上下文）
块级元素会有bfc条件------可以触发bfc--------利用bfc的特性来解决一些问题 1、什么是BFC？就是一个封闭独立的渲染的区域 2、什么元素会有BFC的条件？ ---块级元素会有，行内元素没有 3、什么情况下块级元素可以产生bfc... 查看详情
css中块级格式化上下文（bfc）的特性与应用
一、何为BFC块级格式化上下文（BlockFormattingContext）是网页CSS视觉渲染的一部分，并用于决定盒子的布局。在定位体系中属于常规流(NormalFlow)（另外两种定位体系为浮动(Floats)和绝对定位(AbsolutePositioning)）。二、BFC如何形成BFC的形... 查看详情
理解bfc
1、BFC块级格式化上下文 具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。2、满足一下条件即可触发BFC body根元素 浮动元... 查看详情
css之流体特性和bfc
1.流体特性块级元素默认情况下，自动占满整个父容器，在添加margin，padding,border后，实际content区域自动变化利用这个特性，可以实现宽度已知的多栏布局<divclass="div1"></div><divclass="div2"></div><divclass="div3"><... 查看详情
从例子来看bfc(代码片段)
...的英文全称BlockFormatContext，也就是块级格式化上下文。BFC特性首先，我们大家都知道的BFC特性：内部的元素会在垂直方向，从顶部一个接一个的放置Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。... 查看详情
blockformattingcontexts（块级格式化上下文）简称bfc的特性
如何触发BFC呢？ float除了none以外的值 overflow除了visible以外的值（hidden，auto，scroll） display(table-cell，table-caption，inline-block) position（absolute，fixed） fieldset元素 需要注意的是，display: 查看详情
☀️bfc是什么？如何触发？有什么应用场景？(代码片段)
面试官：说一说BFC吧我：??那是啥…💥BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区... 查看详情
☀️bfc是什么？如何触发？有什么应用场景？(代码片段)
面试官：说一说BFC吧我：??那是啥…💥BFC是什么BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区... 查看详情
学习总结：css块级与行级元素特性盒模型层模型bug与bfc浮动模型(代码片段)
...nTal2height:30px;font-size:13px;color:#009933一、元素的块级与行级特性在CSS属性display控制元素是否及如何显示的特性，常用的值有none、inline、block、inline-block，在CSS3中还有一些新的特性状态，在这里不做讨论。这里我们主要讨论display在... 查看详情
chrome插件特性及实战场景案例分析
...ff0c;本文换个思路，从应用着手，通过讲解插件的特性来启发读者在工作中哪些场景可以通过插件来解决。本文侧重点不是Chrome插件的基础开发，而是聚焦于原理及应用，会从插件的一些重要特性讲起，结合实... 查看详情
前端面试css—bfc的渲染规则有哪些？有哪些应用场景？(代码片段)
...4. 计算BFC高度的时候浮动元素也会参与计算。2.BFC的应用场景1. 防止浮动导致父元素高度塌；现有如下代码：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"conten... 查看详情
布局中的bfc---重点是前言
...很模糊。问了一下度娘，看到张鑫旭的《CSS深入理解流体特性和BFC特性下多栏自适应布局》。呀，原来是这东东啊。BFC应该是前端的基础知识，也许很多前端er工作中经常用到，但是未必真的归纳总结过（自己躺枪），反正能完... 查看详情