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

当元素CSS属性设置了下列之一时,即可创建一个BFC: float:left|right position:absolute|fixed display: table-cell|table-caption|inline-block overflow: hidden|scroll|auto…

hasLayout与BFC是分别在IE和其他浏览器上的两个作用很相近的概念,在很多时候,我们需要触发它们去实现有些效果.例如清除浮动时需要触发hasLayout与BFC:很多自适应的两栏和三栏布局(两边固定宽度,中间自适应)需要触发hasLayout与BFC:很多奇形怪状的IE bug的解决需要触发hasLayout…至于详细的用法这里就不做详细说明了,这里说说触发hasLayout与BFC的条件: hasLayout Layout是 IE 的专有概念,它决定了元素如何对其内容进行定位和尺寸计算…

BFC 在上一篇文章中,清除浮动方法解析,我们谈及了一些使用css属性解决浮动带来的影响.但是在解决浮动带来的影响的方法中,如果细心思考,会产生如下疑问: 为什么overflow可以清除浮动带来的影响? 能否用其他css属性清除浮动带来的影响? 种种的疑问,会让你觉得CSS真的不容易精通,说精通过于高大上,就连掌握都挺难的. 在清除浮动方法解析文章中,只是稍微说明了一下上面两个问题的原因是BFC(块级格式化上下文,Block Formatting Contexts).在分享BFC之前,有必要谈谈…

BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进行定位,以及与其他元素的关系和相互作用.下表就是成为BFC元素后的特性以及如何成为BFC. BFC(参考W3C) 特性 进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,那么该元素就成为了一个隔离的独立容器,BFC的区域不会与外部浮动元素重叠,且在同一个BFC内的两个相邻块级元素的外边距会重…

BFC的通俗理解: Block Formatting Context(块级格式化上下文)是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. 简单来讲,我们可以把它理解为,我们在进行盒模型布局的时候,如果一个元素符合了成为BFC的条件,该元素成为一个隔离了的独立容器,元素内部元素会垂直的沿着其父元素的边框排列,和外部元素互不影响 .比如浮动元素会触发BFC,浮动元素内部的子元素主要受到该浮动元素的影响,而两个浮动元素之间是互不影响的. 在…

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. 1.2产生BFC的条件 当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatti…

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

BFC是 W3C CSS 2.1 规范中的一个概念Block Formatting Context的缩写即格式化上下文,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.简单讲,它是提供了一个独立布局的环境,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等.元素如果创建了BFC,那么BFC决定了如何对其内容进行定位,以及它与其他元素的关系和相互作用. 在这个环境中按照一定规则进行布局不会影响到其它环境中的布局.比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动…

关于浮动 设置为浮动的元素会脱离当前文档流,向左或向右移动直到边缘遇到另一个浮动元素或者到达边界.普通元素不会对齐造成影响. 浮动是把双刃剑,在给我们的布局带来便利的同时有一些缺点需要我们去解决.例如最常见的父元素塌陷.如下图所示: .warper{ width: 200px; border:1px solid #ff6633; } .float-1{ float: left; background: blue; height: 100px; width: 100px; } .float-2{…