[转]学习块格式化上下文（BlockFormattingContext）

学习块格式化上下文（BlockFormattingContext）

什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式化模型. 视觉格式化模型视觉格式化模型(visual formatting model)是用来处理文档并将它显示在视觉媒体上的机制,它也是CSS中的一个概念. 视觉格式化模型定义了盒(Box)的生成,盒主要包括了块盒.行内盒.匿名盒(没有名字不能被选择器选中的盒)以及一些实验性的盒(未来可能添加到…

[转]学习块格式化上下文（BlockFormattingContext）

原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html 格式化上下文格式化上下文( formatting contexts )├── 块级格式化上下文( Block formatting contexts )( BFC )├── 行内格式化上下文( Inline formatting contexts ) ( IFC )├── 自适应格式化上下文( Flex Formatting Contexts )( FFC )└── 网格布局格式化…

块格式化上下文（Block Formatting Context，BFC）

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域. 下列方式会创建块格式化上下文: 根元素或包含根元素的元素浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display为 table-cell,HT…

前端面试题-BFC(块格式化上下文)

一.BFC 的概念 1.规范解释块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. 2.通俗理解 BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品. 如果一个元素符合触发 BFC 的条件,则 BFC 中的元素布局不受外部影响. 浮动元素会创建 BFC,则浮动元素内部子元素主要受该浮动元素影响,所…

css中margin重叠和一些相关概念（包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes ）

平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外界元素的重叠现象. 先了解几个概念:可替换元素.不可替换元素(non-replaced element).包含块(containing block).块级格式化上下文(BFC). 可参考css2.1 中文规范 1.可替换元素与不可替换元素根据css1 中所述:所谓可替换元素就是浏览器根据元素的标签…

BFC块级格式化上下文

BFC块级格式化上下文触发条件 overflow 值不为 visible 的块元素根元素 html 元素浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) display 为这类值... flow-root inline-block table-cell flex inline-flex 应用外边距塌陷让浮动内容和周围的内容等高 2栏布局 MDN:块格式化上下文 CSS深入理解流体特性和BFC特性下多栏自适应布…

BFC（块级格式化上下文）的理解

本文转载(https://segmentfault.com/a/1190000013647777) 一.BFC的概念 1.规范解释块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. 2.通俗解释: BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境中的物品. 如果一个元素符合触发BFC的条件,则该元素中的…

CSS外边距合并&块格式上下文

前言问题Margin Collapsing 外边距合并Block Formatting Context 块格式化上下文解决方案参考前言之前在前端开发的过程中,都没有遇到外边距合并的问题(其实是因为大多时候都直接用前端样式库("'▽'")),这一次需要动手排一个页面,也挺简单,但是遇到了一个奇怪的问题,所以学习记录一下. 问题测试代码如下: <!doctype html> <html class="no-js" lang=""…

坑爹的BFC;块格式上下文

Formatting context(FC) Formatting context 是 W3C CSS2.1 规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用.最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC), IE浏览器中没有BFC的概念,但是有个差不多的东东叫做hasLayout .…

格式化上下文formatting contexts

原文简书原文:https://www.jianshu.com/p/20c32c367b63 什么是格式化上下文(formatting contexts) Formatting context是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系.相互作用.格式化上下文指的是初始化元素定义的环境.包含两个要点,元素定义的环境和初始化. 在 CSS 中,元素定义的环境有两种,一种是块格式化上下文( Block form…

Block Formatting Contexts (块级格式化上下文) 详解

最近在学习BootStrap框架,发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样.它的样式是这样的: .clearfix:before { content: " "; display: table; } .clearfix:after { content: " "; display: table; clear: both; } 用:befor和:after伪元素清除浮动是我熟悉的,不过一般我使用display:block而非display…

块级格式化上下文(block formatting context)

在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不同),元素的具体位置由坐标位置决定. BFC是属于普通流,因此它对兄弟元素也不产生影响. 一…

块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位. 浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似. 绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不…

CSS2系列：BFC(块级格式化上下文)IFC(行级格式化上下文)

BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible 代码注释很重要 <html> <head> <title></title> <s…

BFC(Box,Formatting,Context) —— 块级格式化上下文

Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相关. BFC布局规则: (1)内部的Box会在垂直方向,一个接一个地放置 (2)Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 (…

BFC块级格式化上下文简述

做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态定位,对于这几种耳熟能详的定位在这里我们不必花费时间去讨论,我们今天要关注的是另一种神奇的定位,也就是所谓的bfc,对于前面几个定位,都会或多或少产生一些后遗症,影响它的兄弟元素的位置和父元素产生高度塌陷,这个不仅会影响内部的元素,还会对外部的元素产生影响,经常会弄得很头疼,往往为了移动某一个很小的…

详解块级格式化上下文（BFC）

相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规范,把和块级格式化上下文有关的资料整理了出来. 先介绍一下普通流,普通流就是我们口中常说的文档流.在CSS 2.1的规范中有两段关于普通流的描述: Normal flow. In CSS 2.1, normal flow includes block formatting of block-leve…

基础总结（02）--BFC（块级格式化上下文）

BFC(块级格式化上下文)布局规则 1.元素垂直排列. 2.同一个BFC相邻两个元素的margin会重叠. 3.BFC区域不会与浮动元素重叠. 4.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也如此. 5.计算BFC的高度时,浮动元素也参与计算. 如何创建BFC 1.根元素 2.浮动float 3.absolute或fixed 4.overlfow部位visible 5.display为inline-block, table-cell, table-capti…

BFC——块级格式化上下文

BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如overflow方法)就是触发了浮动元素的父元素BFC,使到它可以包含浮动元素,从而防止出现高度塌陷的问题. 简单来说,BFC就是一种属性.这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用. 二.BFC的触发浮动…

块级格式化上下文（ Block formatting contexts）

那么如何触发BFC呢? float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll ) display (table-cell,table-caption,inline-block) position(absolute,fixed) fieldset元素 BFC的特性: 1)块级格式化上下文会阻止外边距叠加当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加.换句话说,如果这两个相邻的块框不属于同一个块级格…

我理解的BFC(块级格式化上下文)

BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人. 不是所有的元素模式都能产生BFC,w3c 规范: display 属性为 block, list-item, table 的元素,会产生BFC. 大家有…

详说 Block Formatting Contexts (块级格式化上下文)

在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案.定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Norma…

BFC 块级元素格式化上下文

Block Formatting Contexts: 块级元素格式化上下文块级元素如何对它的内容(子元素:也是一个块元素)进行布局,以及与其它元素(与内容同级别)的关系和相互作用普通文档流的布局规则 1.浮动的元素是不会被父级计算高度 2.非浮动元素会覆盖浮动元素的位置 3.margin会传递给父级 4.两个相邻的元素上下margin会重叠 BFC的布局规则 1.浮动的元素会被父级计算高度(父级触发了BFC) 2.非浮动元素不会覆盖浮动元素的位置(非浮动元素触发了BFC) 3.margin不会…

Block Formatting Contexts (块级格式化上下文) 使用参考

转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部分进行拓展,进一步说明 BFC 的特性. 但在进一步说明 BFC 特性之前,Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model)…

BFC 详说 Block Formatting Contexts (块级格式化上下文)

定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一下. 普通流(Normal Flow) 在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行, 除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在…