BFC(block formatting context)

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

触发BFC:

1.根元素

2.float;

3.overflow:auto,scroll,hidden;

4.display:table-cell、table-caption、inline-block、flex、inline-flex;

5.position:absolute、fixed;

注:

一、没有父级的元素为根元素

二、浮动会触发BFC

三、overflow 属性规定当内容溢出元素框时发生的事情:

overflow:hidden;1.子集margin-top把父级一起往下带;2.子级浮动导致高度塌陷,可以自动找回高度;3.子级超出父级容器范围

overflow:scroll;多用于留言板类型

时间: 2024-10-12 23:05:39

BFC(block formatting context)的相关文章

HasLayout和BFC(Block Format Context)

HasLayout和BFC 1.什么是HasLayout HasLayout是IE浏览器的一个内部的特性,这个特性有两个是true和false,false表示没有开启布局,而true表示开启了. 在IE中一个元素要么根据父元素的大小进行布局,要么根据自身的内容大小来布局,而默认情况一般是前者.但是,当我们需要根据内容来确定元素大小时,就需要开启元素的HasLayout属性,换句话说就是将元素的HasLayout设置为true. 当一个元素有一个布局时,它会对自己和后代元素进行计算从而计算自身的尺

块级格式化上下文(Block Formatting Context)

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

有关对hasLayout和BFC(Block Formatting Contexts)的理解

2014年1月26日 首先,hasLayout 和 Block Formatting Contexts 分别是什么? 1.hasLayout是IE内部的一个特有的隐形属性,属性值为true/false.元素一旦拥有了这个属性,就拥有了布局,也就是说该元素可以对自己及其子元素进行尺寸计算和定位(比起依赖父元素进行布局会花费更大的代价).由于这个元素是隐形的,不能通过CSS来设置hasLayout:true/false;可以通过js来检测元素是否拥有布局.hasLayout是只读属性,一旦触发,不可

我们常用,却容易忽视——CSS的BFC(Block formatting contexts)

BFC--一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-level box的: 在一个块级排版上下文中,盒子是从包含块顶部开始,垂直的一个接一个的排列的. 相邻两个盒子之间的垂直的间距是被margin属性所决定的,在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的 咱们看个例子: 代码如下: 在图中我们发现

块格式化上下文(Block Formatting Context,BFC)

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

常规流之块级格式化上下文(Block Formating Context)

在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框(block-level-boxes)或行内级框(inline-level-boxes)的相对定位.常规流中的框属于一个格式化上下文,可能是块或者是行内,但不能同时都是.块级框参与块级格式化上下文,行内级框参与行内级格式化上下文.今天我们先来说说块级格式化上下文,也就是我们常说的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)块级格式化上下文会阻止外边距叠加 当两个相邻的块框在同一个块级格式化上下文中时,它们之间垂直方向的外边距会发生叠加.换句话说,如果这两个相邻的块框不属于同一个块级格

【转】关于Block Formatting Context--BFC和IE的hasLayout

转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮

关于Block Formatting Context--BFC和IE的hasLayout

本文--- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局.一个环境中的元素不会影响到其它环境中的布局.比如浮动元素会