在CSS2.1中,有三种定位方案——普通流、浮动和绝对定位:

普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素默认为普通流定位。

浮动:浮动布局中,元素首先按照普通流位置出现,然后根据浮动方向尽可能向左或右偏移,效果与文本环绕相似。

绝对定位:元素会脱离普通流,因此绝对定位元素不会对其兄弟元素产生影响(与float不同),元素的具体位置由坐标位置决定。

BFC是属于普通流,因此它对兄弟元素也不产生影响。

一、BFC(块级格式化上下文)

BFC是W3C CSS2.1规范中的一个概念,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。目前除了IE6-7外其他浏览器均支持BFC。在CSS3中BFC叫做Flow Root。

与普通容器相比,BFC元素可以看作是隔离了的独立容器,内部的元素不会在布局上影响外面元素。

BFC原理

1.BFC这个元素垂直方向上的边距可去掉重叠

2.BFC元素可以看作是隔离了的独立容器,内部的元素不会在布局上影响外面元素。

3. 计算BFC时,里面的浮动元素也 参与计算高度

4.不会与浮动元素重叠

二、如何形成BFC

满足任意下面条件的元素可形成BFC:

1. 浮动元素,float除了none外的值

2. 绝对定位元素,position:absolute/fixed

3. display为 inline-block , table-cells , table-captions之一

4. overflow为visivle之外的值(hidden,auto,scroll)

display:table本身不产生BFC,而是由它产生匿名框,包含display:table-cell的框产生BFC。

注意:BFC并不是元素,而是元素带有的一些属性,因此上面元素是产生了BFC,而他们本身并不是BFC。

1. BFC可以包含浮动元素

这是使用overflow:hidden方法闭合浮动的原理,W3C原文:"'Auto' heights for block formatting context roots",就是BFC会根据子元素情况自动适应高度,使子元素包含浮动

<div style="border:1px solid #00F;overflow:hidden;width:300px;">

    <div style="float:left;background:#939;">我的父元素是 BFC</div>
</div>
<div style="line-height:3em;">----------我是华丽分割线-----------</div>
<div style="border:1px solid gray;width:300px;">
    <div style="float:left;background:#3C6;">我的父元素不是 BFC</div>
</div>

注意:IE6-7不支持BFC,需要出发hasLayout闭合浮动

2.BFC可以组织元素被浮动元素覆盖

浮动元素的块级兄弟元素会无视浮动元素的位置,尽量占满一行,这样会被浮动元素覆盖,为该兄弟元素形成BFC可以组织被覆盖。

<div style="float:left;width:150px;height:50px;background:#FF0;">
我是浮动元素
</div>
<div style="width:200px;height:80px;background:#30F;color:#fff;">
我是非浮动元素,并且没有创建 BFC
</div>
<div style="line-height:3em;">----------我是华丽分割线-----------</div>
<div style="float:left;width:150px;height:50px;background:#FF0;">
我是浮动元素
</div>
<div style="width:200px;height:80px;background:#30F;color:#fff;display:inl
ine-block;">
我是非浮动元素,创建了 BFC
</div>

效果:

3. BFC可以阻止父子元素的margin折叠

当且仅当两个块级元素毗邻并且在同一块级格式化上下文时,他们垂直方向之间的外边距才会折叠。也就是说,及时两个块级元素毗邻,当不在同一个BFC时,它们的边距不会折叠。

<div style="margin-top:20px;background:yellow;width:300px;">
<div style="margin-top:20px;">
我的上外边距是 20px,父级元素不是 BFC
</div>
</div>
<div style="margin-top:20px;background:yellow;overflow:auto;width:300px;">
<div style="margin-top:20px;">
我的上外边距是 20px,父级元素是 BFC
</div>
</div>

效果:

引自http://www.cnblogs.com/vitruvi/p/4303891.html

块级格式化上下文(block formatting context)的更多相关文章

  1. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  2. BFC --- Block Formatting Context --- 块级格式化上下文

    虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...

  3. 块级格式化上下文( Block formatting contexts)

    那么如何触发BFC呢? float 除了none以外的值 overflow 除了visible 以外的值(hidden,auto,scroll ) display (table-cell,table- ...

  4. 详说 Block Formatting Contexts (块级格式化上下文)

    在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ,也就是本文的主角 Block Formatting Contexts (块级格式化上下文),本文会基于上文关于 BFC 的部 ...

  5. Block Formatting Contexts (块级格式化上下文) 使用参考

    转自:http://kayosite.com/block-formatting-contexts-in-detail.html 在上文<详说清除浮动>中,Kayo 较为详细地介绍了 BFC ...

  6. BFC 详说 Block Formatting Contexts (块级格式化上下文)

    定位方案是控制元素的布局,在 CSS 2.1 中,有三种定位方案——普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对 ...

  7. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

  8. Block Formatting Contexts (块级格式化上下文) 详解

         最近在学习BootStrap框架,发现里面清除浮动的类 .clearfix 跟平时自己用的不太一样.它的样式是这样的: .clearfix:before { content: " ...

  9. css中margin重叠和一些相关概念(包含块containing block、块级格式化上下文BFC、不可替换元素 non-replaced element、匿名盒Anonymous boxes )

    平时在工作中,总是有一些元素之间的边距与设定的边距好像不一致的情况,一直没明白为什么,最近仔细研究了一下,发现里面有学问:垂直元素之间的margin有有互相重叠的情况:新建一个BFC后,会阻止元素与外 ...

随机推荐

  1. IOS开发-图片上传

    目前IOS端开发,图片上传到服务器分为两种,一种是直接上到服务器,一种是借助第三方储存(减少服务器压力). 一.直接上传到服务器 /** * 代码演示 */ //*******UIImagePNGRe ...

  2. mvc中多参数URL会很长,首次加载不传参数让url很短,路由规则实现方法[bubuko.com]

    如要实现列表中地址全路径“bubuko-11-2.html”,在首次进入时,使用短路径“bubuko.html”,只有再次href后才显示全路径“bubuko-11-2.html”,下面使用路由规则来 ...

  3. ngCordova

    参见:http://blog.csdn.net/Luo_xinran/article/details/52164480 ngCordova是基于Cordova封装的AngularJS的调用本地设备接口 ...

  4. Files 的值“ < < < < < < < .mine”无效。路径中具有非法字符。

    出现这个问题的原因是,用svn时,发生了冲突.解决方法:先解决代码冲突,然后在你的工程OBJ/DEBUG目录下,找到 工程名.csproj.FileListAbsolute.txt的文件打开并删除含有 ...

  5. if、if elif判断

    1.if.py #coding=utf-8 user = 'alex' passwd = 'alex3714' username = input('username:') password = inp ...

  6. stdcall, cdecl, pascal 区别(转载)

    转载自:http://www.cnblogs.com/lidabo/archive/2012/11/21/2781484.html stdcall, cdecl, pascal 区别 这三个参数都是告 ...

  7. EventBus--介绍

    注意: 1,post()方法里面的类型和onEvent()中的类型要一致., 2,订阅者对象中 必须有 onEvent 的 public 方法     ---public void onEvent(O ...

  8. 拥抱高效、拥抱 Bugtags 之来自用户的声音(三)

    小编按:这是一篇 Bugtags 用户来稿,主要是介绍了使用 Bugtags 前后对测试及解决 Bug 所带来的变化,感谢山西农业大学 - 高正炎同学对 Bugtags 的信赖和支持.小编在这里诚邀各 ...

  9. 黑马程序员_ C语言基础(二)

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 概览 今天基础知识分为以下几点内容(注意:循环.条件语句在此不再赘述):   1.Hello W ...

  10. fdfdfdfdfdfdfdfdfdfdfd

    len := Length( Face[integer(FaceType)][Line-1] );  SetLength( Face[integer(FaceType)][Line-1], Len+1 ...