BFC主题的文章列表，还有BFC的技术要点_第1页

深入理解BFC和Margin Collapse(转)

作者写的很详细，感谢分享。来源：http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html首先我们来看看w3c规范对BFC的解释，其实对于这种概念的学习上，我们总是建议首先寻找官方的定义，因为原则上来说官方的才是最权威和正确的，而且还比较详...

代码星球 ·2021-02-21

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必须属于一个格式化上下文，你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内...

代码星球 ·2021-02-12

css 高度塌陷和外边距折叠问题详解，（BFC）

一，高度塌陷1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<metaname="viewport"content="width=device-width,initial-scal...

代码星球 ·2021-01-17

BFC自适应布局

BFC(BlockFormattingContext)块级格式化上下文。它是一个独立的渲染区域。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。块级元素：父级（是一个块元素）内...

代码星球 ·2020-11-21

那什么时候会触发BFC呢？块级格式化上下文

<html>根元素；float的值不为none；overflow的值为auto、scroll或hidden；display的值为table-cell、table-caption和inline-block中的任何一个；position的值不为relative和static。换言之，只要元素符合上面...

代码星球 ·2020-09-06

BFC,IFC,GFC,FFC

FC的全称是：FormattingContexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。FC一共包含BFC、IFC、GFC、FFC四种类型。CSS2.1规范中只有BFC、IFC。CSS3推出GFC、FFC两种新类...

代码星球 ·2020-06-28

BFC总结

1.BFC定义(非学术)BFC是一块独立渲染区域，决定了其包裹的子元素的定位方式。2.BFC形成条件下列情况将创建一个块格式化上下文：1.根元素2.float为left或right3.overflow为hidden|auto|scroll4.display为table-cell|table-caption|inline...

代码星球 ·2020-06-28

深入理解BFC

定义　　在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formattingcontext的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BF...

代码星球 ·2020-05-24

CSS学习（二）- 有关 hasLayout 和 BFC

1.hasLayout概念说明‘Layout’可以被某些CSSproperty（特性）不可逆的触发，而某些HTML元素本身就具有layout。‘Layout’在IE中可以通过hasLayout属性来判断一个元素是否拥有layout，如object.currentStyle...

代码星球 ·2020-05-23

BFC浅析

1.定义BFC(Blockformattingcontext)即"块级格式化上下文"。它是一个独⽴的渲染区域，只有Block-levelbox参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部无关。block-levelbox:display属性为block,list-item,t...

代码星球 ·2020-05-23

BFC简析

一、BOX模型box是CSS中布局的基本单位，而不同类型的box，会参与不同的FormattingContext（一个决定如何渲染文档的容器），box内的元素会以不同的方式渲染。block-level：display属性为blcok、table、list-item，会生成block-levelbox，并参与BlockF...

代码星球 ·2020-05-16

浅谈BFC

BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC以及BFC的一些用处（如清浮动，防止margin重叠等）。一、BFC是什么？　　在解释BFC是什么之前，需要先介绍Box、FormattingContext的概念。　　Box:CSS布局的基本单位　　B...

代码星球 ·2020-04-08

BFC的个人理解

BFC是Block Formatting Context （块级格式化上下文）的缩写，是一个独立的渲染区域，这个东西的存在是为了隔绝一些内部子元素对外部元素的影响。例如：我们用overflow:hidden来清除浮动，就是父元素生成了BFC，从而隔绝了内部子元素浮动对外部其他元算的影响，从...

代码星球 ·2020-04-06

BFC、IFC、FFC、GFC

FC（FormattingContext）它是W3CCSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 BFC（blockformattingcontext）直译为“块级格式化上下文”W3C原文：...

代码星球 ·2020-04-06

CSS布局中一个简单的应用BFC的例子

什么是BFCBFC(BlockFormattingContext)，简单讲，它是提供了一个独立布局的环境，每个BFC都遵守同一套布局规则。例如，在同一个BFC内，盒子会一个挨着一个的排，相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clearfloat也只对同一个BFC内的元素有效。什...

代码星球 ·2020-04-02