IT技术互动交流平台

BFC之宽度自适应布局篇

作者:猴子猿  发布日期:2016-03-04 21:00:45

说到自适应布局,我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用float+margin的形式。利用块状元素的流体特性,然后计算出float元素的宽度,并赋予到块状元素的相应margin中。但是这么做是有个缺点的,就是我们每次都得知道float元素的宽度,然后赋予到块状元素的margin。

然而,我们在”BFC之浅析篇”中学习到BFC有一特性:BFC的区域不会与外部浮动元素重叠。并且利用了这一特性,实现了两栏自适应布局。我们再来回顾下。

<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加overflow:hidden,触发元素BFC*/
                 overflow:hidden;
             }
        </style>
    </head>
    <body>
        <div class='leftDiv'></div>   
        <div class='normalDiv'>

        </div>
    </body>
</html>

 运行代码,截图为下

可以看见浮动元素(绿色方块)与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,当你设置一个比宽度无线大时,它也不会超过它容器的宽度。

啧啧啧!这不就完美了么。那么我们设置它的宽度为很大很大时,也就可以用来自适应布局了嘛。

看看如下代码


<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <style>
             .leftDiv {
                 width:100px;
                 height:100px;
                 background:green;
                 float:left;
             }
             .normalDiv {
                 height:100px;
                 background:pink;
                 /*添加display:table-cell,且将宽度设置为很大,如9000px*/
                 display:table-cell;
                 width:9000px;
             }
        </style>
    </head>
    <body>
        <div class='leftDiv'></div>   
        <div class='normalDiv'></div>
    </body>
</html>

运行代码后,效果图见上。

ps:自己运行后的体会更深哦,然后伸缩浏览器,哈哈哈,试了就知道,是可以的哦。

针对第四点中的display:table-caption,直接滤过!

针对第四点钟的display:inline-block,由于和float一样具有包裹性,所以滤过。但是,我们曾在'BFC之清除浮动篇&clear'中提到过IE6、7有个hasLayout嘛,在IE6、7中它可是具有流体特性的哦。所以可以解决IE6、7的自适应布局。代码如下

.floatElm {
    float: left;
}
.bftContent {
    display: inline-block;
}

so, 对触发BFC的方法,能用在自适应布局中的方法如下

overflow(hidden/auto)

缺点:

1、  overflow:hidden当内容过多时,带有剪裁功能

2、  overflow:auto当内容过多时,会出现滚动条

display:inline-block

缺点:

只适用于IE6、7

display:table-cell

缺点:

只适用于IE8+和其他浏览器

终上所述,我们可以得到利用BFC实现自适应布局的通用方法如下:

.floatElm {
    float:left;
}
.bfcContent {
    display:table-cell;
    width:9000px;/*宽度大到屏幕宽度即可*/
    /*hack手段,针对IE6、7*/
    *display:inline-block;
    *width:auto;
}

好了,我们利用这个方法来实现实现三栏布局玩玩。代码如下:


<!--
    左右宽度为100px,中间自适应
-->
<!DOCTYPE html> 
    <head>
        <title>BFC</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <style>
            .floatLeft,.floatRight {
                width:100px;
                height:100px;
            }
            .floatLeft {
                /*左浮动触发BFC*/
                float:left;
                background:green;
            }
            .floatRight {
                /*右浮动触发BFC*/
                float:right;
                background:yellow;
            }
            .bfcContent {
                /*table-cell触发BFC*/
                display:table-cell;
                width:9000px;/*宽度大到屏幕宽度即可*/
                /*hack手段,针对IE6、7*/
                *display:inline-block;
                *width:auto;
                height:100px;
                background:pink;
            } 
        </style>
    </head>
    <body>
        <div class='floatLeft'></div>
        <div class='floatRight'></div>
        <div class='bfcContent bfcContentStl'></div>
    </body>
</html>

不信,自己运行代码,拉动浏览器看看啦。 

Tag标签: 宽度   布局  
  • 专题推荐

About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规