What:了解该知识点的概念,本质以及有关牵扯到的相关知识概念 BFC这个东西说常见的话你可能不觉得,但是你肯定会常用,也许你在用的时候也没想到BFC这东西。网上也有很多写这些东西的文章,但是自己写一遍印象更深一点。 首先我们看看w3c对BFC是怎么定义的: http://www./TR/CSS2/visuren.html#block-formatting
用谷歌翻译(笑..我是谷歌脑残粉)过来就是:
从上面我们还可找出几个几个比较重要的概念东西,比如:boxe , block formatting context。毫无疑问BFC就是block formatting context的缩写,中文就是“块级格式化上下文”的意思。我们在那个w3c那个页面发现还有其他inline formatting context,所以我们可以看看 formatting context是个什么东西: Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。 最常见的Formatting context有Block fomatting context(简称BFC)和Inline formatting context(简称IFC)。CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC和FFC. 至于那个box还要讲吗?嗯,还是回顾一下: Box是CSS布局的对象和基本单位, 直观点来说,就是一个页面是由很多个Box(即boxes)组成的。元素的类型和display属性,决定了这个Box的类型。 不同类型的Box, 会参与不同的Formatting context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。常见的盒子类型 block-level box: display属性为block, list-item, table的元素,会生成block-level box。并且参与block fomatting context。 inline-level box: display属性为inline, inline-block, inline-table的元素,会生成inline-level box。并且参与inline formatting context。 妈蛋四级刚刚飘过的孩子看这点英文不容易啊,有时候我们总觉的书上或者官方的概念定义的东西不利于我们理解,所以我们更喜欢有些老师通俗的讲解。这里我们也通俗的理解一下: BFC就是“块级格式化上下文”的意思,创建了 BFC的元素就是一个独立的盒子,不过只有Block-level box可以参与创建BFC, 它规定了内部的Block-level Box如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。 BFC有一下特性:
好了What这一阶段就到这了,基本的概念我们都要了解清楚,不清楚的多看几遍,是在不清楚的我猜是我写的不够通俗易解。 接下来我一般会考虑Why,即为什么会出现这个问题,为什么要这样用,为什么会出现这些效果。但是这里就不写了,因为我也不知道写啥(哭…求高手指点)… 到最后我就是考虑How了,不用说你也知道了,就是怎么解决这些问题,这些知识点该怎么用,还有没有其他的方法.. 那么我们该怎么使用BFC呢,如何触发BFC呢?:
在以上的情况里可以创建BFC。 接下我们看下怎么运用BFC,在哪些场景可以用到BFC. 1.解决margin叠加问题 三P每个p之间的距离为50px,发生了外边距叠加。 要解决这个叠加问题即让每个P之间是100px,我们可以新建一个BFC,怎么建呢?可以给p元素添加一个父元素,让它触发BFC。如下: 2.用于布局 从图中我们会发现上面BFC的第三个特性,就是元素的左外边距会触碰到包含块容器的做外边框,就算存在浮动也会如此。那么我们如何解决这个问题呢?看上面BFC第四个特性,就是BFC不会与浮动盒子叠加,那么我们是不是可以创建一个新的BFC来解决这个问题呢?来看看: 发现我们用overflow:hidden触发main元素的BFC之后,效果立马出现了,一个两栏布局就这么妥妥的搞掂… 3.用于清除浮动,计算BFC高度. 因为上面第六个特性提到计算BFC高度时,浮动元素也会参与计算,我们先看一个例子: 我们发现由于里面两个子元素浮动的关系,两个box已经脱离了父元素的包含块,父元素高度已经塌陷,我们需要让父元素包含两个box子元素,这样计算高度时,两个浮动子元素就会参与,所以我们要闭合浮动,触发父元素的BFC,我们还是继续用overflow:hidden来看看效果吧: 怎么样,效果还很明显的吗,当然清理(闭合)浮动还有很多方法,大家可以看看一丝大神写的那些年我们一起清除过的浮动。 好了写到这里基本才不多了,BFC是个很奇怪的东西,她一直隐式的存在我们的css样式里,但是我们要记住BFC是页面元素里一个独立存在作用块,它不影响它外面的布局,外面的元素也不会影响到BFC里面的布局。 参考文章:http://www./TR/CSS2/visuren.html#block-formatting http://www./view/css-xhtml/55.html,http://www./css/understanding-bfc-and-margin-collapse.html 国际惯例,附上我的地址:http:// |
|