CSS布局中一个简单的应用BFC的例子

标签: 前端开发 | 发表时间:2012-12-31 21:58 | 作者:sapphire
出处:http://www.aliued.cn

上文中我们讲述了在一个星球上发生的有关overflow:hidden的故事。这次,我们再欣赏下她另一个迷人之处。其实,关键也不是她啦。而是由于她会引起 BFC(Block Formatting Context)。BFC又是什么?什么情况会创建BFC?它有什么用?其实在写代码时经常会遇到。

什么是BFC

BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则。例如,在同一个BFC内,盒子会一个挨着一个的排,相邻盒子的间距是由margin决定且垂直方向的margin会重叠。而float和clear float也只对同一个BFC内的元素有效。

什么情况产生BFC

W3C标准中这样描述:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

非块级盒子的浮动元素、绝对定位元素及块级容器(比如inline-blocks,table-cells和table-captions),以及overflow属性是visible之外任意值的块级盒子,都会创建了一个BFC。即当元素CSS属性设置了下列之一时,即可创建一个BFC:

  • float:left|right
  • position:absolute|fixed
  • display: table-cell|table-caption|inline-block
  • overflow: hidden|scroll|auto

 

BFC的用处

一个简单的例子:

html:

<div class=”item”>
    <div class=”pic”>your photo here?</div>
    <p class=”cont”>
    爱饭否,爱豆瓣,也爱鸡脱壳。
    爱爬山,爱拍美景。
    爱腐败,更爱远征的自虐。
    爱下雪天,爱感动,爱平底鞋。
    我没有什么特别,我很特别。
    我和别人不一样,我和你一样。
    我是前端。
    </p>
</div>

 

css:

.item{width:300px;border:1px solid #b2d1a3;background-color:#e5ebe4;}
.pic{width:80px;height:80px;margin:10px;
    font-family:”Segoe UI Light”;color:#fff;background-color:#acdae5;}
.cont{margin:10px;color:#37a;}

这段代码是结构简单的三个元素的叠放,效果如下:

简答的元素叠放

这时,如果要将文字部分放到图片的右侧,很多人都会想到给.pic使用float:
css:

.pic{width:80px;height:80px;margin:10px;
    font-family:”Segoe UI Light”;color:#fff;background-color:#acdae5;
    float:left;
}
将得到这样的效果:

左侧图片使用了float

右侧内容并没有如我们预料一样规整的排在右侧,而是将左侧图片包围起来。接下来,我们为右侧内容部分设置overflow:hidden属性来使它形成一个新的BFC:
css:

.cont{margin:10px;color:#37a;overflow:hidden;}

这次将看到:

bfc

这确实是我们想要的。可是,在IE6下看到的却是下面这样:

ie6双边距及layout

不仅内容区没有排在右侧,而且遭遇了双边距bug。双边距bug非本文重点讨论,直接为.pic增加display:inline来解决。我们关心的是为什么IE6下右侧内容元素还是不能决定自己的布局呢?这里涉及到了另一个概念HasLayout。其实,在完美世界的字典里,是没有HasLayout这个概念的。它是IE浏览器引擎内部特有的属性,它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时,这个元素才可以决定自己和其子孙元素的布局。为数不多的元素默认这个属性值为true,包括:

  • body and html
  • table, tr, th, td
  • img
  • hr
  • input, button, file, select, textarea, fieldset
  • marquee
  • frameset, frame, iframe
  • objects, applets, embed

所以,当发现有些元素的布局在IE下有异常时,可以有充分的理由来怀疑可能是hasLayout属性为false。而且这个属性值不能直接设置。一个元素要么默认拥有,要么通过设置特定的CSS属性来获取。直接的使元素hasLayout属性值为true的方法是声明下面的CSS属性之一:

  • width: 除auto之外的值
  • height: 除auto之外的值
  • float: left|right
  • position: absolute
  • display: inline-block
  • writing-mode: tb-rl(IE)
  • zoom: 除normal之外的值
IE7中增加了一些同样效果的属性:
  • min-height: 任意值
  • max-height: 除 “none” 之外的任意值
  • min-width: 任意值
  • max-width: 除 “none” 之外的任意值
  • overflow: hidden|scroll|auto
  • overflow-x: hidden|scroll|auto
  • overflow-y: hidden|scroll|auto
  • position: fixed

最常用的是zoom:1,因为这个设置对元素外观不会造成任何影响。但是这个属性是IE特有的CSS属性,不会通过CSS检查器。所以,有推荐对于IE7,最好是设置min-height:0。因为0是min-height的初始值,这样不会对元素外观造成影响。对于IE6及更早的版本,推荐方法是设置height:1%。这个高度会使得容器盒子的大小刚好包含内容区而忽略掉真正的属性值。但这个设置的缺陷是会影响到其他浏览器的解析,因此需要使用hack屏蔽掉对其他浏览器的影响。
所以,最终的代码将是:

.item{width:300px;border:1px solid #b2d1a3;background-color:#e5ebe4;}
.pic{width:80px;height:80px;margin:10px;
    font-family:”Segoe UI Light”;color:#fff;background-color:#acdae5;
    float:left;display:inline;}
.cont{margin:10px;color:#37a;overflow:hidden;_height:1%;}

你偏爱哪一种呢?欢迎探讨。

相关 [css 布局 中一] 推荐:

css三列布局

- - Wing的风言风语
   web平面设计中有一个既经典又基础的问题(据说很多公司面试都考):三列布局问题,就是一个大盒子,里面竖直再分三块小盒子并排,其中左边的盒子和右边的盒子固定宽度,中间的盒子自适应宽度,无乱怎么样放大缩小浏览器都不会变形. 这两天研究了一下这个问题,默认父容器是body,1:设置三个盒子都左浮动且宽度都是33.3%,不行.

CSS布局中一个简单的应用BFC的例子

- - 阿里巴巴(中国站)用户体验设计部博客
上文中我们讲述了在一个星球上发生的有关overflow:hidden的故事. 这次,我们再欣赏下她另一个迷人之处. 而是由于她会引起 BFC(Block Formatting Context). BFC(Block Formatting Context),简单讲,它是提供了一个独立布局的环境,每个BFC都遵守同一套布局规则.

一览CSS布局标准

- - Kejun's Blog
回顾历史,CSS1于1996.12.17发正式版,它是为辅助HTML的展现效果而生的. 1998.5.12,CSS2发正式版. 随后发修订版CSS2.1,纠正了CSS2中的一些错误. 注意从CSS2起,CSS的作用就不是辅助展现了,变为全全负责展现. (注:当年 CSS2的勘误表有兴趣可以看看).

CSS技巧荟萃:了解CSS页面布局和加载流程

- - 前端观察
如果你开发web相关应用或者网站的话,肯定知道CSS对于页面布局的重要性. 在本篇CSS技巧中我们将介绍页面加载的流程来帮助你更好的实现页面布局. 在我们开始正式的介绍页面流程前,我们需要简单了解几种不同类型的html元素,以及它们的缺省显示方式. 这里我们主要重点介绍两个类型的元素:. 如果大家关心html5的话,你应该知道在HTML5中也包含了几个新的元素,例如,section,article等等,但是仍旧遵循这里我们介绍的显示类型.

Semantic:来自未来的CSS布局框架

- 小宇 - 雷锋网
CSS网格框架可以让你享受轻松的生活,但这依然无法掩盖它们的不足. 让我们感到幸运的是,先进技术为我们引入了新的方法去布局网页. 在我们前往了解先进技术前,我们必须首先了解当前影响CSS网格样式的三个看似不可克服的缺陷. 这是我从“纯化论者”口中听到过的最大的抱怨,自我在两年前创建1KB CSS Grid框架开始,CSS网格系统就规定标记和描述必须在一起.

页面架构HTML+CSS ●▽● 各种布局各种实现

- - SegmentFault 最新的文章
(1)清除浏览器默认样式. (1)项目开发初期就定义好. (2) reset.css 在引入的时候一定要放在第一位. (3)不同的产品 reset.css不一样. 3.table合并边框间距. table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距.

[常用布局]左栏固定宽度,右栏自适应的两种纯CSS方法

- - 蓝飞技术部落格
其一,左栏固定宽度,右栏自适应之绝对定位法:. 左栏固定宽度,右栏自适应之绝对定位法. 由于左栏使用绝对定位,脱离了文档流,因此有一个缺陷,即当左栏高度大于右栏时,无法将container撑开,这个缺陷单单只看两栏布局并没有太大影响,但如果两栏布局下面有一个底栏,就会出现底栏与左栏重叠的情况:.

CSS图形

- GLORY - 酷壳 - CoolShell.cn
下面的示例展示了使用纯CSS制作的各种图形,你可以自由地修改文中的CSS代码. 经测试,IE9, Chrome, FF, Safari都可以正常显示. 五角星形 via Kit MacAllister. 心形 via Nicolas Gallagher. 无穷大 via Nicolas Gallagher.

用 Compass 寫 CSS

- Jay - Blog.XDite.net
最近在開發一個新產品,整體來說應該是接近寫完了,不過越接近完工,抓 IE 系列的 bug 就越是挫折. 朋友 @evenwu 就來洗我要不要換成 Compass,說這東西超神奇,超好用,還可以把 IE bug 殺光光. 其實之前就久仰 Compass 大名了,只是文件實在看起來太他媽的眼花繚亂,因為專案進度一直在跑,不太敢貿然換掉寫 CSS 的方式.

CSS 入门

- - 博客 - 伯乐在线
级联样式表非常简单,也就是 (X)HTML 网页之上的分层设计. 使样式表 “级联”,这样您就可以跨站点应用它 — 也就是说,将样式应用到网站,它就会自行应用到每个网页的每个元素. ●XHTML:可扩展 HTML. 对于网站,将数据与设计分离是一个重要的概念:数据使用 (X)HTML 发送到 浏览器,而设计使用 CSS 应用到该数据.