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

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

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

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

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

一.定宽: 1.定位居中(absolute) 方法一: html: <div class="main"></main> css: .main{ width:400px; height:200px; background:#eee; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; } 方法二: html: <div class="main&qu…

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

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