认识和理解css布局中的BFC

时间:2023-01-04 13:26:58

认识和理解css布局中的BFC

BFC的定义

是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用

Block Formatting Context 的元素的特点

  • 其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。

  • 相邻的块级元素的垂直边距会折叠(collapse)。

  • 每一个元素左外边(margin)与包含块的左边相接触(对于从右到左的格式化,右外边接触右边), 即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的 Block Formatting Context 。

      例如:
    <div class="con">
    <img class="headImg floatLeft" src="mm.jpg" />
    <div class="mainCon">many text and pic here</div>
    </div>

.headImg 和 div.mainCon的左外边框是与div.con左边框接触的,当div.mainCon内容较多时,表现为围绕浮动的.headImg元素,触发div.mainCon元素的BFC即避免围绕浮动元素,从而实现2列布局.

触发元素的BFC的方式:

  1. **设置浮动 ** 则div.mainCon的宽度会自适应内容多少,div.con剩余宽度不够容纳div.mainCon的内容时会出现换行,要确保2列布局需要指定div.mainCon的宽度
  2. 设置overflow:hidden 2列布局,div.mainCon自适应容器剩余宽度,但设置溢出隐藏,限制了不能在div.mainCon外布局其他元素(如 箭头 浮动菜单...), 注意(设置 overflow:hidden; 或 overflow:auto; 元素都是隐藏溢出的 test in chrome)
  3. ** display:inline-block 或 display:table-caption 效果同float** , div.mainCon 宽度自适应内容多少 内容多会换行,要设定宽度才能确保2列布局
  4. **display:table-cell 效果同float **,宽度自适应内容多少 内容多不会换行,不用设定宽度确保2列布局,但是 ie6-7不支持display:table-cell
  5. position:absolute; 效果同 display:table-cell, 兼容性好一点

BFC到底是什么?

当涉及到可视化布局的时候,Block Formatting Context提供了一个环境,HTML元素在这个环境中按照一定规则进行布局。BFC环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC,浮动元素内部子元素的主要受该浮动元素影响,两个浮动元素之间是互不影响的。这里有点类似一个BFC就是一个独立的行政单位的意思。

怎样才能形成BFC

  • float的值不为none。
  • overflow的值不为visible。
  • display的值为table-cell, table-caption, inline-block中的任何一个。
  • position的值不为relative和static。

BFC的作用

不和浮动元素重叠,实现两列布局

如果一个浮动元素后面跟着一个非浮动的元素,那么就会产生一个覆盖的现象,很多自适应的两栏布局就是这么做的。比如下图的效果,参考例子

<div style="float:left; border: 2px solid red"><img src="user-img" /></div>
<p style="border: 2px solid blue;display:block;overflow:hidden;*zoom:1">
The quick brown fox jumped over the 4seohunt.com lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
The quick brown fox jumped over the lazy dog's back.
</p>

清除子元素浮动影响 clearfix

只要把父元素设为BFC就可以避免子元素的浮动导致父元素的高度塌陷的问题,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了(触发IE Haslayout)。

子元素和父元素同属一个BFC,子元素的Margin边距穿透父元素与其他元素margin折叠问题的修复

按照BFC的定义,只有同属于一个BFC时,两个元素才有可能发生垂直Margin的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡(例如边框,非空内容,padding等)就会发生margin重叠。(子元素和父元素margin重叠,子元素和父元素的兄弟元素margin重叠)

因此要解决垂直margin重叠问题,只要让它们不在同一个BFC就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC就可以了。这样子元素的margin就不会和父元素的margin发生重叠了。

<div class="prev">prev div</div>
<div class="next mt10 h100 bg-darkred">
<h2 class="mt100 h10 bg-darkblue">i am title</h2>
</div>

div.pre 和 div.next的垂直间距为100px; 因为 div.next 和它内部的h2属于同一个BFC,所以垂直margin重叠了(h2的垂直margin穿透了父元素 影响了父元素和其他元素的关系)

解决方法:

  1. 让2个margin-top不相邻(div.next的margin-top:10px 和 h2的margin-top:100px),设置父元素的border 或padding
  2. 触发父元素的BFC, 形成独立的布局单元

认识和理解css布局中的BFC的更多相关文章

  1. css布局中的BFC

    1.BFC的区域会与float的元素区域重叠 2.计算BFC的高度时,浮动子元素也参与计算 3.BFC就是页面上的一个隔离的独立容器,容器里面的子元素是不会影响到外面的元素 4.BFC意为" ...

  2. 理解 CSS 布局和块级格式上下文

    前言 BFC 的概念始于 CSS2,是个蛮古老的 CSS 话题了,网上也到处能搜到 BFC 的介绍,但是都不够简洁.本文系翻译自 Rachel Andrew 女士的博文 Understanding C ...

  3. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  4. DIV&plus;CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  7. DIV&plus;CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. CSS布局中最小高度的妙用

    CSS布局中最小高度的妙用 --最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持B ...

  9. CSS布局中——导航是非常常见的

    导航绝对是页面布局中最常见的,为了不用每次去写,稍微贴个简单的导航模版出来,方便以后使用. <title>CSS菜单</title> <style type=" ...

随机推荐

  1. 利用cytoscape做网络图

    首先做出下面的基因间相互关系图 1.准备sif文件 data.sif 网络数据文件 gene1 pp gene2 gene3 gene4 gene5 gene6 gene7 gene8 gene9 n ...

  2. Watch The Movie

    Watch The Movie Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65535/65535 K (Java/Others) Tot ...

  3. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  4. tableView嵌套collectionView

    首先是自定义collectionView填充的tableViewCell import UIKit // 定义一个collectionView,重写初始化大小和布局方法 class TrendsDet ...

  5. Can&&num;39&semi;t connect to local MySQL server through socket &&num;39&semi;&sol;var&sol;run&sol;mysqld&sol;mysqld&period;sock’

    今天服务器遇到了一个很熟悉的问题 输入 #mysql -u root -p ERROR 2002 (HY000): Can't connect to local MySQL server throug ...

  6. JMeter学习笔记-JForum环境搭建

    一.准备环境 1. Java环境安装配置(JDK+JRE+环境变量) 2. Tomcat下载安装 下载地址: 安装教程:http://jingyan.baidu.com/article/870c6fc ...

  7. 机器学习数据集&comma;主数据集不能通过&comma;人脸数据集介绍&comma;从r包中获取数据集&comma;中国河流数据集

    机器学习数据集,主数据集不能通过,人脸数据集介绍,从r包中获取数据集,中国河流数据集   选自Microsoft www.tz365.Cn 作者:Lee Scott 机器之心编译 参与:李亚洲.吴攀. ...

  8. 2019&period;01&period;21 bzoj3674&colon; 可持久化并查集加强版(主席树&plus;并查集)

    传送门 题意:维护可持久化并查集,支持在某个版本连边,回到某个版本,在某个版本 询问连通性. 思路: 我们用主席树维护并查集fafafa数组,由于要查询历史版本,因此不能够用路径压缩. 可以考虑另外一 ...

  9. web工程迁移---weblogic8迁移到jboss5遇到的异常

    原有的web工程是在weblogic8上运行的,但现在的要求是要运行到jboss5中,为如后迁移到更高版本的jboss做准备 由于我对weblogic没有过研究,所以之前的步骤都是有别人进行的,在进行 ...

  10. mybatis的mapper代理,SqlMapConfig&period;xml中配置,输入和输出映射使用案例

    public class User { private int id; private String username;// 用户姓名 private String sex;// 性别 private ...