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

定义:BFC(Block formatting context)为块级格式化上下文.它是一种环境,不会对周围其它盒子的布局产生影响,它只规定了内部如何布局. BFC布局规则 1.内部的Box会在垂直方向,一个接一个地放置. 2.Box垂直方向的距离由margin决定.属于同一个BFC的两个相邻Box的margin会发生重叠 3.每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反).即使存在浮动也是如此. 4.BFC的区域不会与floa

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

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

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

开篇 一些元素,如float元素,如position为absolute,inline-block,table-cell或table-caption的元素,以及overflow属性不为visible的元素,它们将会建立一个新的块级格式化上下文. 上述定义已经很详细的描述了块级格式化上下文(Block Formatting Context)是如何形成的,为了方便起见,文中均用BFC代替.现在,让我们用一种简单的方式对其进行重新定义: BFC也是HTML中的一个盒子(看不见而已),只有满足至少下列条件

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

1.触发BFC的条件如下:1)浮动元素,float 除 none 以外的值:2)绝对定位元素,position值为二者absolute,fixed之一:3)Display值为三者inline-blocks,table-cells,table-captions之一:4)Overflow值为三者hidden,auto,scroll之一. 2.BFC的特性1)BFC可以阻止外边距折叠:2)BFC可以包含浮动的元素:3)BFC可以阻止元素被浮动元素覆盖.