说到自适应布局，我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用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>

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

BFC之宽度自适应布局篇的更多相关文章

  1. table-cell实现宽度自适应布局

    利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...

  2. 元素的BFC特性与自适应布局

    一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...

  3. 同一行多个div宽度自适应布局

    主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...

  4. css回顾之左侧宽度自适应布局

    目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...

  5. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

  6. CSS深入理解流体特性和BFC特性下多栏自适应布局

    一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...

  7. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  8. 转：CSS布局奇淫技巧之-宽度自适应

    css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...

  9. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

随机推荐

  1. Docker 创建php 开发环境遇到的权限问题解决方案

    最近我将公司的开发,和测试环境都运行到docker 上面,因为开发,测试基本都是装代码拉到本址,然后,再装目录,挂载到镜像目录中如:我用的是docker-compose # development.y ...

  2. S3C2440UART之FIFO

    一.基础知识 S3C2440有3个独立的串口,每一个都可以利用DMA和中断方式操作.每个包含2个64字节FIFO,一个收,一个发.非FIFO模式相当于FIFO模式的一个寄存器缓冲模式.每一个UART有 ...

  3. java空指针异常：java.lang.NullPointException

    一.什么是java空指针异常 我们都知道java是没有指针的,这里说的"java指针"指的就是java的引用,我们不在这里讨论叫指针究竟合不合适,而只是针对这个异常本身进行分析.空 ...

  4. AngularJS中的route可以控制页面元素的改变，使多页面变成一个单页面。。。

    SPA(Single Page Application)指的是通单一页面展示所有功能,通过Ajax动态获取数据然后进行实时渲染,结合CSS3动画模仿原生App交互,然后再进行打包(使用工具把Web应用 ...

  5. Mybatis添加到Spring

    一.准备工作: 1.1 添加相应的jar包依赖: 这里用到了两个jar包,一个是mybatis的,另一个是mybatis-spring的,代码如下: 1 2 3 4 5 6 7 8 9 10 < ...

  6. nodejs的实现原理和搭建服务器（动态）

    心得体会    今天是我学习的Node.js的第二天,所谓的node.js其实它是javascript编写的服务器的语言,同时它又是属于后台的框架,是一个开放性的平台. 一.相关理论知识: 我们可以用 ...

  7. Hive_配置远程Metastore

    注 : 待测试 一.准备两三台linux机器,最好是hadoop集群环境 机器A:10.0.0.2 机器B:10.0.0.3 机器C:10.0.0.4 二.个机器安装信息 机器A安装mysql(用于存 ...

  8. 关于兼容IE的一些策略

    --css 盒子模型下的 box-sizing 属性,只兼容到ie8: -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o- ...

  9. Oracle数据库操作

    本例使用oracle数据库,使用PL/SQL可视化工具: --查询员工表数据 (emp为pl/sql自带的表,也可自己新建)select * from emp; --创建表空间create table ...

  10. ButterKnife--View注入框架的使用

    作为一名Android开发,是不是经常厌烦了大量的findViewById以及setOnClickListener代码,而ButterKnife是一个专注于Android系统的View注入框架,让你从 ...