BFC之宽度自适应布局篇
说到自适应布局，我们曾在“抛砖引玉之宽度自适应布局”一文中学习过。当时的核心思想主要是利用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之宽度自适应布局篇的更多相关文章
- table-cell实现宽度自适应布局
利用table-cell可以实现宽度自适应布局. table-cell有一些比较好用的属性,比如垂直居中,自适应高度宽度等,为元素设置table-cell布局之后,元素的margin失效,paddin ...
- 元素的BFC特性与自适应布局
一.BFC元素简介与基本表现. BFC全程"Block Formatting Context",中文为"块级格式化上下文".记住一句话:BFC元素特性表现原则就 ...
- 同一行多个div宽度自适应布局
主要运用到的是:布局神器display:table-cell 元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 自动平均划 ...
- css回顾之左侧宽度自适应布局
目标: <!DOCTYPE html> <meta charset=utf-8> <html> <head> <title>alibaba& ...
- 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局
这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...
- CSS深入理解流体特性和BFC特性下多栏自适应布局
一.块状元素的流体特性与自适应布局 块状元素像放在容器中的水流一样,内容区域会随着margin, padding, border的出现自动填满剩余空间,这就是块状元素的流体特性. 来一个小实验: di ...
- 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）
来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...
- 转：CSS布局奇淫技巧之-宽度自适应
css这个东西,说难不难,说容易也不容易.我觉得最重要的还是经验的积累,正所谓的不积硅步,无以至千里.这一系列文章讲述几种css特殊布局的实现,也当作为自己做个备忘吧. 首先讲的是三列布局,左右两列宽 ...
- 这可能是史上最全的CSS自适应布局总结教程
标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...
随机推荐
- Font Squirrel
Font Squirrel FontSquirrel:国外免费字体下载网是一个提供高质量商业字体下载网站,提供海量的英文字体库,用户可以随意下载并应用于各种商业用字,无需考虑其版权问题. 官网地址:h ...
- 安装Python算法库
安装Python算法库 主要包括用NumPy和SciPy来处理数据,用Matplotlib来实现数据可视化.为了适应处理大规模数据的需求,python在此基础上开发了Scikit-Learn机器学习算 ...
- java排序学习笔记
前面写了js的排序实现,总得玩玩java的哈. 同样,冒泡.选择.快速(这三个之前实现过也写过文章).堆排序,然后做比较. 主要遇到的难点: - -||想轻松点写个封装计时的逻辑,不想每调用一个排序就 ...
- SSH整合，必出精品
SSH:顾名思义(spring,struts2,hirbernate) Struts(表示层)+Spring(业务层)+Hibernate(持久层) Struts是一个表示层框架,主要作用是界面展示 ...
- php面向对象中的几个基本定义
面向对象: 面向对象是现代编程中的一种重要设计方法,其基本思想是使用对象,类,封装,继承等来进行程序设计. 对象: 一只猪,一只羊,一辆汽车. 类: 类的主要作用就是创建对象. 封装: 类的特点是将对 ...
- WDM驱动和NT驱动之我见
WDM驱动是NT驱动的进化版.我个人觉得它的主要好处有两个 1.能检测到设备的插入,系统能自动分配设备的硬件信息,如中断号.IO端口.设备物理地址等 2.支持设备的开机状态拔出 之前的NT驱动和硬件关 ...
- linux下打包zip文件
zip [参数] [打包后的文件名] [打包的目录路径] linux zip命令参数列表:-a 将文件转成ASCII模式-F 尝试修复损坏的压缩文件 -h 显示帮助界面-m 将文件压 ...
- Xamarin.Forms 免费电子书
Xamarin Evolve 正在举行,现在已经放出2本免费的Xamarin.Forms 免费电子书,据现场的同学说这两天还有Xamarin.Forms 重磅消息发布: Creating Mobile ...
- ENode框架Conference案例分析系列之 - 事件溯源如何处理重构问题
前言 本文可能对大多数不太了解ENode的朋友来说,理解起来比较费劲,这篇文章主要讲思路,而不是一上来就讲结果.我写文章,总是希望能把自己的思考过程尽量能表达出来,能让大家知道每一个设计背后的思考的东 ...
- 玩转JavaScript OOP[0]——基础类型
前言 long long ago,大家普遍地认为JavaScript就是做一些网页特效的.处理一些事件的.我身边有一些老顽固的.NET程序员仍然停留在这种认知上,他们觉得没有后端开发肯定是构建不了系统 ...