【块级格式化上下文(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 具有BFC属性的元素也属于普通流定位方式,与普通容器没有什么区别,但是在功能上,具有BFC的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且具有普通容器没有的一些特性,比如包含浮动元素,以防止出现高度塌陷问题. 总之,BFC就是一种属性,这种属性会影响着元素的定位及与其兄弟元素之间的相互作用. 二.BFC的用途 从整体上看,BFC是隔离了的容器: 1.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(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…

BFC块级格式化上下文

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

基础总结（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的触发 浮动…

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

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