bfc | 易学教程

CSS BFC

阅读更多关于 CSS BFC

1、什么是BFC 　　BFC就是一种属性。这种属性可以影响元素的定位以及其兄弟元素之间的相互作用。BFC是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。中文城块级格式化上下文 BFC的布局规则如下： 1. 内部的盒子会在垂直方向，一个个地放置； 2. BFC是页面上的一个隔离的独立容器； 3. 属于同一个BFC的两个相邻Box的上下margin会发生重叠； 4. 计算BFC的高度时，浮动元素也参与计算 5. 每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此； 6. BFC的区域不会与float重叠；那么如何触发 BFC呢？只要元素满足下面任一条件即可触发 BFC 特性： body 根元素；浮动元素：float 不为none的属性值；绝对定位元素：position (absolute、fixed) display为： inline-block、table-cells、flex overflow 除了visible以外的值 (hidden、auto、scroll) BFC作用：　　1、利用BFC可以消除下边距折叠。　　 <body> <div class="p"></div> <div class="p"></div> </body> 这样的两个p会发生下边距重叠

BFC理解余应用

阅读更多关于 BFC理解余应用

引言：这篇文章是我对BFC的理解及总结，带你揭开BFC的面纱。你将会知道BFC是什么，形成BFC的条件，BFC的相关特性，以及他的实际应用。一、何为BFC BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 1、浮动元素，float 除 none 以外的值； 2、定位元素，position（absolute，fixed）； 3、display 为以下其中之一的值 inline-block，table-cell，table-caption； 4、overflow 除了 visible 以外的值（hidden，auto，scroll）；三、BFC的特性 1.内部的Box会在垂直方向上一个接一个的放置。 2.垂直方向上的距离由margin决定 3.bfc的区域不会与float的元素区域重叠。 4.计算bfc的高度时，浮动元素也参与计算 5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。看到这里是不是有丈二和尚摸不着头脑的感觉，下面我就用案例来帮助理解认识：四、实践是检验真理的唯一标准（1）BFC中的盒子对齐特性的第一条是：内部的Box（块级元素）会在垂直方向上一个接一个的放置。（这条特性不必纠结

css 盒模型

阅读更多关于 css 盒模型

1、基本概念：　　标准盒模型 + IE 模型(怪异盒模型) 2、区别：　　标准盒模型中 width 指的是内容区域 content 的宽度；height 指的是内容区域 content 的高度。　　标准盒模型下盒子的大小 = content + padding + border + margin; 　　IE 模型中的 width 指的是内容、边框、内边距的宽度（content + border + padding ）;height 同理。　　IE 模型下盒子的大小 = width/height(content + padding + border) + margin; 3、css 中如何设置标准模型和IE模型：　　　　如果doctype协议缺失，会由浏览器自己界定，在IE浏览器中IE9以下（IE6.IE7.IE8）的版本触发怪异模式，其他浏览器中会默认为W3c标准模式。　　box-sizing: content-box 标准盒模型　　box-sizing: border-box IE盒模型 4、js 如何设置获取盒模型对应的宽和高：　　dom.style.width/height（只能获取内联宽高）　　dom.currentStyle.width/height（浏览器渲染之后的取值，只有IE支持）　　window.getComputedStyle(dom)

BFC-边距重叠解决方案

阅读更多关于 BFC-边距重叠解决方案

emmm~总结下 <div> 1. BFC的基本概念块级格式化上下文 2.BFC的原理---可以将BFC看成一个封闭的大箱子,箱子里面不影响外面,外面不影响里面 2.1 同一个bfc下外边距方向会发生重叠---解决上下块级元素margin重叠问题 2.2 bfc创建的区域不会与浮动元素的box重叠,-----可以应用在左右布局上,清除浮动 2.3 BFC是一个独立的元素,外面的元素不会影响里面的元素,里面的元素不会影响外面的元素 2.4 计算bfc高度的时候,浮动元素也会往里面计算 --子元素是浮动元素,高度可以给创建了BFC的父元素 3. 如果创建BFC(习惯用的比较多的--overflow:hidden /auto , position:absolute, float:left 3.1 float属性不为none 3.2 position不为static和relative 3.3 overflow不为visible 3.4 display为inline-block, table-cell, table-caption, flex, inline-flex </div> 4.应用实例 4.1BFC垂直方向边距重叠--非常重要 <div class="main_box"> <div class="top_section">1</div> <!-- 下面的overflow:

什么是BFC？

阅读更多关于什么是BFC？

Block Formatting Contexts 即块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box（display 属性为 block, list-item, table 的元素）如何布局，并且与这个区域外部毫不相干。其中 Formatting Context 是一个决定如何渲染文档的容器，Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC。通俗点说，BFC就是一个独立的盒子，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。在文档呈现开始的时候，会自动创建一个BFC来对整个页面进行布局，在没有创建一个新的BFC的时候，整个文档就这一个BFC。 BFC的规则内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子可以看出）同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠

CSS里的BFC和IFC的用法

阅读更多关于 CSS里的BFC和IFC的用法

**一、BFC** --------------------- Block Formatting Contexts (BFC，块级格式化上下文)，就是一个块级元素的渲染显示规则（可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。 **1、BFC的布局规则例如以下：** ①.内部的盒子会在垂直方向，一个个地放置。 ②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。 ③.每一个元素的左边，与包括的盒子的左边相接触，即使存在浮动也是如此。 ④.BFC的区域不会与float重叠。 ⑤.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 ⑥.计算BFC的高度时，浮动元素也參与计算。 **2、介绍过了BFC的布局规范，再来说说哪些元素会触发BFC。** **只要元素满足下面任一条件即可触发 BFC 特性** ①.根元素。 ②.float的属性不为none。 ③.position为absolute或fixed。 ④.display为inline-block；table-cell；table-caption；flex。 ⑤.overflow不为visible。 **3、接下来说说BFC的作用和原理** **①、解决margin重叠问题** **②、解决浮动高度塌陷问题**

BFC 神奇背后的原理

阅读更多关于 BFC 神奇背后的原理

转载http://blog.melonhuang.gitpress.org/~docs/css/1formattingContext.md BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC ，以及 BFC 的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec, 和许多文章，来全面地理解BFC： BFC 是个什么？哪些元素会生成 BFC BFC 的神奇的作用，及背后的原理一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box , Formatting context 的概念。 Box: CSS布局的基本单位 Box 是CSS布局的对象和基本单位，直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和display属性，决定了这个 Box 的类型。不同类型的 Box ，会参与不同的 Formatting context (一个决定如何渲染文档的容器)，因此 Box 内的元素会以不同的方式渲染。让我们看看有哪些盒子： block-level box : display属性为block, list-item, table的元素，会生成 block-level box 。并且参与

BFC和清除浮动

阅读更多关于 BFC和清除浮动

BFC：特性块级格式化上下文会阻止外边距叠加当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。块级格式化上下文不会重叠浮动元素根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用。块级格式化上下文通常可以包含浮动通俗地来说：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。触发条件： <html>根元素 float 除了none以外的值 overflow 除了visible 以外的值（hidden，auto，scroll ） display (table-cell，table-caption，inline-block) position（absolute，fixed） fieldset元素（实验中，不建议使用）建议采取的BFC特性 .lbf-content { overflow: hidden; } .lbf-content { display: table-cell; width: 9999px;

清除浮动专题

阅读更多关于清除浮动专题

1.三个已经混淆的概念（1）不浮动float:none; （2）清除周围的浮动元素（3）清除子元素浮动对父元素的影响 2.什么是清除浮动清除浮动不是把当前标签的浮动给清楚了，如果这样，还加浮动做什么。其实清除浮动指的是清除当前元素旁边的浮动元素，但是当前元素又不能影响别人，打不赢就跑，所以自己就跑到下面去了。 3.为什么要清楚浮动在布局的时候我们经常希望某些内容能够水平排布，水平排布后，由于内部内容不确定，高度不能简单的给一个定值。而如果不给高度，子元素又都浮动了，父盒子就会因为没有子盒子的支持而塌陷。利用清除浮动的这个特性，我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来，并且能够根据内部内容的变化而改变高度。 4.清除浮动的方法（1）额外标签法原理：单独使用一个标签加上clear:both跑到浮动元素下面，从而消除子盒子浮动造成的父盒子塌陷。典型网站：京东优点：通俗易懂，容易掌握缺点：添加很多无意义的空标签，不符合结构与表现分离的原则，不利于后期的维护。（2）父元素设置overflow:hidden 原理：让父盒子形成BFC，BFC的特性之一就是可以承载浮动元素优点：不存在结构和语义化问题，代码量极少。缺点：内容增多时候不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。 BFC（block

清除浮动

阅读更多关于清除浮动

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; } 解释： 1) display:block 使生成的元素以块级元素显示,占满剩余空间; 2) height:0 避免生成内容破坏原有布局的高度。 3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙； 5）zoom：1 触发IE hasLayout。通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。精益求精方案一：相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个

订阅 bfc