浮动

本文的目的是介绍一些概念来帮你增强 CSS 码力。如标题所示这篇文章主要是讲块级格式上下文BFCBlock Formatting Context。你可能没听过这个术语但只要你曾经使用 过CSS 布局你就能明白它。理解 BFC 是什么、它如何工作、如何创建一个 BFC 是非常有用的这些能帮你更好的理解 CSS 布局。 这篇文章里我会通过几个你会很熟悉的的示...

CSS > 译文：理解CSS中的块级格式化上下文 Original Author: Ritesh Kumar Original Article: http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ Translator: HaoyCn D...

BFC(Block formatting context) （1）概念： 直译为块级格式化上下文，把BFC理解成一块独立的渲染区域，BFC看成是元素的一种属性， 当元素拥有了BFC属性后，这个元素就可以看做成隔离了的独立容器。容器内的元素不会影响容器外的元素. ·我理解为：将BFC看成是一种属性，当拥有该属性的元素就相当于一块独立的区域。 （2）实现BFC属性的方法： 1. 浮动元素，float 除 none 以外的值 2. 定位元素，position的值不是stati...

css中的格式上下文指的是初始化元素的环境，所谓环境是指这个格式化上下文是块级格式化上下文，还是行内格式化上下文。所谓初始化是指元素如何在这个环境里面布局。 个多介绍请参看《KB010: 常规流(Normal flow)》。 ...

转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/ 一、BFC是什么？ BFC（Block Formatting Context）直译为“块级格式化范围”。 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，Block Formatting Cont

  在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上...

BFC（块级格式上下文） 可以解决：清除浮动问题、外边距合并问题、右侧自适应问题 BFC的生成 满足下列css声明之一的元素便会生成BFC 根元素 float的值不为none overflow的值不为visible（常用 overflow:hidden创建BFC区域） display的值为inline-block、table-cell、table-caption position的...

css2.1中定义 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和overflow不为visible的块盒会为它们的内容建立一个新的块格式化上下文 在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直m...

块级上下文（BFC） BFC(block formatting context)是W3C CSS2.1规范中的一个概念，他决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 Box是CSS布局中的对象和基本单位。元素的类型和display属性决定了Box的类型。盒子的类型有： block-level box（块级盒） inline-level box（行内盒） run-in box

注：本文首发于个人博客 www.ferecord.com/understandi…，如若转载请注明来源。 前言 BFC 的概念始于 CSS2，是个蛮古老的 CSS 话题了，网上也到处能搜到 BFC 的介绍，但是都不够简洁。本文系翻译自 Rachel Andrew 女士的博文 Understanding CSS Layout And The Block Formatting Context，内容足...

块级格式化上下文听说过多次，自己也去看了许多文章，但自己总是觉得晦涩，搞不清楚，后来又再去查了下很多文章，终于觉得自己理解一些了，希望自己描述出来能够准确和易懂。 Formatting context Formatting context 是页面的一个渲染区域，它有着自己的渲染规则，决定渲染区域里面的元素怎么定位，以及里面的元素之间的相互作用。而块级格式化上下文(Block fomatting c...

块级格式化上下文(Block Formatting Context，简称BFC) 块级格式化上下文说明 定义：一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局 不同的BFC区域，它们进行渲染时互不感染 创建BFC的元素，隔绝了它内部和外部的联系，内部的渲染不会影响到外部 块级格式化上下文具体规则 创建BCF的元素，它的自动高度需要计算浮动元素 – 原因： 为了隔绝内部和外...