坑爹的BFC;块格式上下文

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

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

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

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

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

BFC块级格式上下文介绍

块级格式上下文(Block formatting context) 什么是BFC? 块格式化上下文(block formatting context) 是页面 CSS视觉渲染的一部分.它是用于决定块盒子的布局及浮动相互影响的一个区域. – MDN 块格式上下文 BFC是一个容器,在这个容器中的元素不会影响到其他容器的布局,处于不同 BFC 中的元素不会互相干扰. BFC的触发条件根元素浮动元素绝对定位元素 absolute 或 fixed display为 inline-block 或 t…

学习块格式化上下文（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 )└── 网格布局格式化…

BFC块级格式上下文

BFC块级格式上下文,独立的一个渲染区域 1.同一个BFC的两个相邻盒子间的margin会重叠(垂直方向): 2.BFC内部的盒子在垂直方向上会一个接一个的放置: 3.每个子元素的左外边距与包含块的左边界相接触: 4.计算BFC的高度时,浮动子元素也参与计算: 5.BFC内部的子元素不会受到外面元素的影响: 6.BFC的区域不会与float的元素区域重叠: 触发BFC条件: float:不为none: overflow的值不为visible: display:inline-block,table…

什么是BFC（块级格式上下文）？

㈠什么是BFC? BFC 全称为块格式化上下文 (Block Formatting Context) . 定义:浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable”的块级盒子,都会为他们的内容创建新的BFC(块级格式上下文). ㈡BFC的布局规则是什么? 1)内部的box会在垂直方向,一个接一个地放置(可以看作BFC中有一个的常规流). 2)Box垂直方向的…

理解 CSS 布局和块级格式上下文

前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context,内容足够简洁明了. 本文的目的是介绍一些概念,来帮你增强 CSS 码力.如标题所示,这篇文章主要是讲块级格式上下文(BFC,Block Formatting Context).你可能没听过这个术语,但只要你曾经使用…

BFC块级格式

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块级排版上下文

1.BFC 全称是块级排版上下文,用于对块级元素排版,默认情况下只有根元素(body)一个块级上下文,但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式,就会为这个块级元素生成一个独立的块圾上下文,就像在window全局作用域内,声明了一个function就会生成一个独立的作用域一样,新开僻的BFC像是开僻了一个新的小宇宙,使这个块圾元素内部的排版完全独立隔绝. 2.独立的块级上下文可以包裹浮动流,全部浮动子元素也不会…

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——块级格式化上下文

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

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

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

css-块级格式上下文

定义: 块级格式上下文(Block Formatting Context)是CSS中一个相对冷门的概念,今天被问到才引起注意,下文简单介绍下它的用法,学习资料多来源于网络,实际开发中遇到再继续更博吧. BFC(Block formatting context)直译为"块级格式化上下文". 它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗地来说:创建了 BFC的元…

CSS--理解块级格式上下文（BFC）

1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 通俗地来说:创建了 BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素(里面怎么布局都不会影响外部),BFC任然属于文档中的普通流 2.BFC的生成: 知道了BFC怎么触发BFC 满足以下条件之一都可以…

BFC——块级格式上下文

BFC中的B指的是block,对应的还有IFC,I指的是inline.对于BFC的理解可以参考层叠上下文.页面中,盒子的排布规则,是生效在对应的BFC中.两个BFC中的布局互不影响.页面的本身的根本身就是BFC,但是页面中的其他元素,则需要我们用css去设置,才会生成新的BFC.有以下方法: float的值不为none. overflow的值不为visible. display的值为table-cell.table-caption.inline-block中的任一个. position的值不为r…

BFC（块级格式上下文）

BFC的生成满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible display的值为inline-block.table-cell.table-caption position的值为absolute或fixed BFC的约束规则浏览器对BFC这块区域的约束规则如下: 生成BFC元素的子元素会一个接一个的放置,垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性.在BFC中相邻的块级…

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

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

BFC块级格式化上下文简述

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

BFC 块级元素格式化上下文

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

理解CSS中的BFC(块级可视化上下文)[译]

开篇一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素.它们将会建立一个新的块级格式化上下文. 上述定义已经非常具体的描写叙述了块级格式化上下文(Block Formatting Context)是怎样形成的,为了方便起见.文中均用BFC取代. 如今,让我们用一种简单的方式对其进行又一次定义: BFC也是HTML中的一个盒子(看不见而已),仅仅有满足…

BFC(块级格式化上下文)

转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details/76408215 什么是BFC 常见的文档流分为:定位流.浮动流.普通流3种. 1.普通流: 在普通流中,元素按照其在 HTML 中的先后位置自上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可…