一、BFC是什么？在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。Box: CSS布局的基本单位 Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类....
分类：
其他好文 时间：
2015-03-03 01:04:30
阅读次数：
219
关于Block Formatting Context－－BFC和IE的hasLayoutBFC（Block Formatting Context）直译为“块级格式化范围”。在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型可以是 block ，或者.....
分类：
其他好文 时间：
2015-03-02 23:55:38
阅读次数：
162
BFC——BlockFormattingContext（块格式化上下文）格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如何布局等。元素如果创建了BFC，那么BFC决定了如何对其内容进行定位，以及它与其他元素的关系和相互作用。创建了BFC的素会按照如下的方式对其子元素进...
分类：
Web程序 时间：
2015-03-02 23:53:27
阅读次数：
145
今天提到BFC和haslayout，就顺带在网上查查资料，总结一下它们。CSS2我们再熟悉不过，当然它里面我们需要掌握的，就是CSS2的选择器和布局，选择器总共31种。避开这个不说，我们说布局。布局经常用到的有浮动、定位，当然也需要知道盒子模型，这里的盒子模型不是说就是内边距、外边距、边框等，他们只...
分类：
其他好文 时间：
2015-03-02 23:49:29
阅读次数：
184
BFC与hasLayout都是CSS布局上的概念。几个月前在微博上才了解什么是BFC，算是对布局有点初步的了解。hasLayout则是IE6、7产生许多bug的根源。浮动、绝对定位元素，不是块框的块容器（inline-block, table-cell, and table-caption），以及设...
分类：
其他好文 时间：
2015-03-02 23:45:40
阅读次数：
232
在CSS布局中float属性经常会被用到，但使用float属性后会使其在普通流中脱离父容器，让人很苦恼1 浮动带来布局的便利，却也带来了新问题 1 2 3 4 5 Clear float 6 23 24 25 26 27 ...
分类：
Web程序 时间：
2015-01-16 16:10:17
阅读次数：
270
支持BFC的浏览器（IE8+，firefox，chrome，safari）Block Formatting Context(块格式化上下文)是W3C CSS2.1规范中的一个慨念，在CSS3中被修改为flow root。格式化则表明了在这个环境中，元素处于此环境中应当被初始化，即元素在此环境中应当如...
分类：
其他好文 时间：
2015-01-13 17:36:49
阅读次数：
175
那么如何触发BFC呢？float 除了none以外的值overflow 除了visible 以外的值（hidden，auto，scroll ）display (table-cell，table-caption，inline-block)position（absolute，fixed）fieldset...
分类：
其他好文 时间：
2015-01-09 13:56:56
阅读次数：
172
不是谁都像你一样只向着前方就能活下去了，你就抛弃那些没用的同伴前行就好了，你注定是要成为海贼王的男人吧，而我就算没有远大的目标也可以。——《one piece》 Block formatting context(以下简写为BFC)又称做块级格式化上下文，源自CSS2.1规范中的Visual for....
分类：
其他好文 时间：
2015-01-05 18:30:10
阅读次数：
162
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 s.....
分类：
其他好文 时间：
2014-12-26 18:24:42
阅读次数：
193
