说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用float+margin的形式。利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应margin中。但是这么做是有个缺点的,就是我们每次都得知道float元素的宽度,然后赋予到块状元素的margin。
然而,我们在”BFC之浅析篇”中学习到BFC有一特性:BFC的区域不会与外部浮动元素重叠。并且利用了这一特性,实现了两栏自适应布局。我们再来回顾下。
BFC
运行代码,截图为下
可以看见浮动元素(绿色方块)与div.noramDiv元素的确木有发生重叠,而且我也没有加margin哦。
你也可以自己运行下上述代码,伸缩页面宽度,可以发现也的确是自适应滴。
(PS:上面所示的BFC实现两栏自适应的例子,可以和“float实例讲解”对比学习下,效果会更加哦。)
我们上面是利用的overflow:hidden;来触发div.normalDiv的BFC。在“BFC之浅析篇”中,我们学习到要触发元素成为BFC,有如下几种方法:
1、 float属性不为none
2、 position为absolute或fixed
3、 overflow的值不为visible
4、 display的值为table-cell,table-caption,inline-block中的任何一个。
抛开第三点,overflow的值不为visible,其他几种也适合实现BFC自适应布局?
当然不是咯。
首先,针对第一点float,由于float触发元素BFC后,自身float又带有特性,如将元素包裹化了,破坏了块级元素的流体性,所以不能用来自适应布局。
针对第二点position,又由于position将元素脱离文档流比较严重,因此,更加不能用来自适应布局。
针对,第四点中 display:table-cell,当你设置一个比宽度无线大时,它也不会超过它容器的宽度。
啧啧啧!这不就完美了么。那么我们设置它的宽度为很大很大时,也就可以用来自适应布局了嘛。
看看如下代码
BFC