bfc | 易学教程

CSS BFC和IE Haslayout介绍

阅读更多关于 CSS BFC和IE Haslayout介绍

BFC(Block Formatting Context) 1. BFC的定义是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 Block Formatting Context 的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在 Block Formatting Context 中相邻的块级元素的垂直边距会折叠（collapse）。在 Block Formatting Context 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的 Block Formatting Context 。从上面的定义我们可以看到Document显示HTML元素的方式和BFC的定义很像，其实我们可以认为Document就是最大的一个拥有BFC的元素了。 2. BFC到底是什么？当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC

详说 Block Formatting Contexts (块级格式化上下文)

阅读更多关于详说 Block Formatting Contexts (块级格式化上下文)

在上文《详说清除浮动》中，Kayo 较为详细地介绍了 BFC ，也就是本文的主角 Block Formatting Contexts (块级格式化上下文)，本文会基于上文关于 BFC 的部分进行拓展，进一步说明 BFC 的特性。但在进一步说明 BFC 特性之前，Kayo 首先要介绍另一个在 CSS 的可视化格式模型 (Visual Formatting Model) 中具有非常重要地位的概念——定位方案。定位方案是控制元素的布局，在 CSS 2.1 中，有三种定位方案——普通流 (Normal Flow) 、浮动 (Floats) 和绝对定位 (Absolute Positioning) ，下面分别对这三种布局简略说明一下。普通流(Normal Flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。浮动 (Floats) 在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。绝对定位 (Absolute Positioning) 在绝对定位布局中，元素会整体脱离普通流

Css里的BFC

阅读更多关于 Css里的BFC

一、BFC简介 BFC全称：Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素）二、BFC的触发条件（只要元素满足下面任一条件即可触发 BFC 特性） body 根元素；浮动元素：float 不为none的属性值；绝对定位元素：position (absolute、fixed)； display为： inline-block、table-cell、flex； overflow 除了visible以外的值 (hidden、auto、scroll)；三、BFC的布局规则 <1> 内部的盒子会在垂直方向，一个个地放置； <2> BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然 <3> 属于同一个BFC的两个相邻Box的上下margin会发生重叠； <4> 计算BFC的高度时，浮动元素也参与计算 <5> 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； <6> BFC的区域不会与float重叠；四、BFC的应用 <1>解决margin重叠问题 <2>解决浮动高度塌陷问题 <3>解决侵占浮动元素的问题五、解决方法（代码和效果图） <1>解决margin重叠问题代码如下： <

css 块级格式化上下文（BFC）

阅读更多关于 css 块级格式化上下文（BFC）

一、块级格式化上下文（BFC） 1、什么是块级格式化上下文？ Block Formatting Contexts (BFC，块级格式化上下文)就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，，容器里面的子元素不会影响到外面的元素） 2、触发BFC的条件如下：根元素 float的值不为none。 overflow 除了 visible 以外的值（hidden，auto，scroll） display的值为table-cell, table-caption, inline-block中的任何一个。绝对定位元素：position (absolute、fixed) 弹性盒 flex boxes (元素的 display: flex 或 inline-flex) 3、BFC 的布局规则：内部的盒子会在垂直方向，一个个地放置； BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然属于同一个BFC的两个相邻Box的上下margin会发生重叠；计算BFC的高度时，浮动元素也参与计算每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； BFC的区域不会与float重叠； 4、BFC特性 1.同一BFC下外边距会发生折叠：代码如下： <!doctype html> <html> <head> <meta

css浮动现象及清除浮动的方法

阅读更多关于 css浮动现象及清除浮动的方法

css浮动现象及清除浮动的方法首先先明确浮动最初的定义及使用场景：实现文本环绕图片的效果。除了用浮动外，目前暂无其他方法实现文本环绕再来看看浮动的具体定义：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，属于浮动布局。 (CSS三种基本的定位机制：普通流、浮动和绝对定位) 当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。浮动未清除，会造成页面混乱（如下）：浮动元素没有设置宽度值，元素的宽度随内容的宽度的变化而变化会对相邻的元素产生影响，相邻元素特指紧邻后面的元素。如果相邻元素是块级元素会无视这个浮动的块框，也就是我们平时看到的效果——使到自身尽可能与这个浮动元素处于同一行，导致被浮动元素覆盖。除非这些 div 设置了宽度，并且父元素的宽度不足以包含它们

对BFC的理解

阅读更多关于对BFC的理解

BFC 块格式化上下文（Block Formatting Context），是web页面的可视化css渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。通俗理解 BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其外部元素。如果一个元素符合出发BFC的条件，则BFC中的元素布局不受外部影响。浮动元素会创建BFC ，则浮动元素内部子元素受该浮动元素影响，所以两个浮动元素之间是互不影响的。创建BFC 根元素或包含根元素的元素浮动元素 float = left|right 或 inherit ，float 不能等于none 绝对定位元素 position = absolute|fixed display = inline-block|flex|inline-flex|table-cell|table-caption overflow = hidden|auto|scroll 不能等于visible BFC的特性 BFC是一个独立的容器，它不会影响其外部元素，外部元素也无法影响到它。 BFC内部的元素从顶部开始一个接一个垂直排列，盒子之间的间距是由margin决定的。在同一个BFC中，两个相邻的块级盒子的垂直外边距会发生重叠。 BFC区域不会和float box发生重叠，因为float

深入理解BFC

阅读更多关于深入理解BFC

一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。 Block formatting context直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。通俗地讲，BFC是一个容器，用于管理块级元素。二、如何创建BFC float为 left|right overflow为 hidden|auto|scroll display为 table-cell|table-caption|inline-block|inline-flex|flex position为 absolute|fixed 根元素三、BFC布局规则：内部的Box会在垂直方向，一个接一个地放置(即块级元素独占一行)。 BFC的区域不会与float box重叠( 利用这点可以实现自适应两栏布局 )。内部的Box垂直方向的距离由margin决定

CSS层叠上下文与BFC

阅读更多关于 CSS层叠上下文与BFC

CSS中的层叠上下文和BFC是两个很虚但极其重要的概念，影响到网页布局的方方面面。有几篇博文讲得很详细，这里稍加摘录，便于记忆。 CSS层叠上下文张鑫旭在深入理解CSS中的层叠上下文和层叠顺序里有深入的讲解：可以创建层叠上下文的规则： z-index 值不为 auto 的flex项(父元素 display:flex|inline-flex ) 元素的 opacity 值不是 1 元素的 transform 值不是 none 元素 mix-blend-mode 值不是 normal 元素的 filter 值不是 none 元素的 isolation 值是 isolate will-change 指定的属性值为上面任意一个元素的 -webkit-overflow-scrolling 设为 touch 需要注意的是：如果层叠上下文元素不依赖z-index数值，则其层叠顺序是 z-index:auto ，可看成 z:index:0 级别；如果层叠上下文元素依赖z-index数值，则其层叠顺序由 z-index 值决定。 BFC（Block Formatting Context）梦想天空在 BFC 神奇背后的原理里解析得很到位： BFC直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level

css中：overflow:hidden清除浮动的原理

阅读更多关于 css中：overflow:hidden清除浮动的原理

要想彻底清除浮动的影响，适合的属性不是 clear 而是 overflow。一般使用 overflow:hidden，利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响。 1. 前言：我们都知道overflow:hidden的字面意思是超出隐藏，说到这个超出隐藏就跟父元素的高度有关了，高度一定了的时候，超出隐藏才有依据。我们知道当子元素开始浮动了，会脱离文档流，其父元素的高度就会变为0，这个时候页面其他元素就会向上占据位置，就会导致页面混乱。这个时候我们在父元素设置overflow:hidden,就解决了页面混乱的问题。 2. overflow:hidden作用机制BFC：定义：BFC（Block Formatting Context）全称是块级格式化上下文，用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文，但是如果一个块级元素设置了float:left,overflow:hidden或position:absolute样式，就会为这个块级元素生产一个独立的块级上下文，使这个块级元素内部的排版完全独立。作用：独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，就是说包含块会把浮动元素的高度也计算在内，所以就不用清除浮动来撑起包含块的高度。那什么时候会触发 BFC 呢？常见的情况如下： • <html>根元素； •

什么是BFC？

阅读更多关于什么是BFC？

什么是BFC？　　什么是BFC，听起来是不是有点蒙，听到这个词就知道它是一个简写，BFC 的全称为：块格式化上下文（Block Formatting Context ），触发BFC的元素会独立出来一个渲染区域，让处于BFC内部的元素与外部的元素相隔离，使内外元素定位不会相互影响。简单来说： BFC能影响盒模型的渲染规范；怎么触发BFC？　　浮动元素 float属性为 left/right 　　定位元素 position属性为 absolute 和 fixed 　　display为inline-block, table-cell, table-caption, flex, inline-flex 　　overflow：hidden；　　意外吗？都是我们每天都在用的CSS样式。以上任何属性都可以让元素触发BFC，改变该元素的渲染规范。 BFC的功能　 1、清除浮动　　先说常用的一点，对，你没有看错，这些属性可以清除浮动，话不多说，上实例看 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .wrap{ 12 padding:

订阅 bfc