Block Formatting Context,中文直译为块级格式上下文. 1. BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 在创建了 Block Formatting Context 的元素中,其子元素会一个接一个地放置.垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性.在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠(c…

什么是BFC? 全称块级格式化上下文?什么意思不懂.看了好多博客,基本都是抄的,真心都不是大白话.我今天来总结一下,用菜鸟级别的语言来描述. BFC 应该可以抽象成一个 独立的个体,出淤泥而不染的白莲花. 是的不受其他元素的影响,始终保持自己独立.就是正常的普通流布局规则,设置的样式是什么样的,就按正常的普通流布局的表现. 内部的子元素 不受外界的影响,外界的元素,也不受内部的元素的影响.各自独立生活在html这片空间下. BFC触发条件: [1]根元素,即HTML元素 [2]float的值不为…

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚.于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS…

BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题,但当别人问我 BFC 是什么,我还是不能很有底气地解释清楚.于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS…

前言 说起KFC,大家都知道是肯德基,但面试官问你什么是BFC.IFC.GFC和FFC的时候,你是否能够像回答KFC是肯德基时的迅速,又或者说后面这些你根本就没听说过,作为一名前端开发工程师,以上这些FC(Forrmatting Context)你都得知道,而且必须得做到像肯德基这样印象深刻.下面我将会带大家一起揭开这些FC的真面目,如果你已经了解的请奖励自己一顿肯德基-(注意文明用语,这里别用语气词) FC的全称是:Formatting Contexts,译作格式化上下文,是W3C CSS2.…

以前在做自适应两栏布局的时候别人口中听到bfc这个词,于是看了各种关于bfc的文章,发现梦想天空介绍的不错,今天就在他的基础上润色一下. 一.BFC是什么? 在解释 BFC 是什么之前,需要先介绍 Box.Formatting Context的概念. Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的.元素的类型和 display 属性,决定了这个 Box 的类型. 不同类型的 Box, 会参与不同的 Formattin…

一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left,right) 2.设置overflow除visible以外的值(hidden,auto,scroll) 3.设置display属性(table,table-cell,inline-block,flex) 4.设置position属性(fixed,absolute) 三.BFC的作用 1.可以解决上下marg…

一.浮动 1.1 各个语言的主要知识点 HTML:标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS: 样式: 布局: 标准流(标准文档流.普通文档流):盒子模型(width/height+padding+border+margin)  块元素行内元素 浮动流:产生?影响?如何解决? 定位流:静态定位(不定位)  相对定位  绝对定位  固定定位 JavaScript(JS): ECMAScript:语法 DOM: BOM: 1.2 浮动产生的背景? 背景:浮动产生的初衷是为了解决…

1.BFC简介 BFC全称"block formatting context",中文为“块级格式化上下文”.特征总之记住一句话: BFC元素特征表现原则就是:内部元素无论怎么翻江倒海,都不会影响外部元素. 如何触发BFC,常见如下: float的值不为none overflow的值为auto,scroll或hidden. display的值为table-cell,table-caption, inlin-block. position的值不为relative和static. 需掌握 B…

什么是BFC.IFC.GFC和FFC CSS2.1中只有BFC和IFC, CSS3中才有GFC和FFC. FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. 1.BFC* BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formatting Contexts就是页面上的一个隔离的渲染区域…