BFC任性跑路的布局1

Block Formatting Context (块格式化上下文)简称:BFC;它是W3C CSS 2.1 规范中的一个概念,格式化则表明了在这个环境中,元素处于此环境中应当被初始化,即元素在此环境中应当如何布局等;

要知道为什么会跑路,首先便了解BFC的布局规则:

BFC布局规则

  1. 内部的Box会在垂直方向,一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时,浮动元素也参与计算。

一、什么情况下会产生block formatting context

1、浮动元素(float: left  right);

2、绝对定位元素(position: absolute  fixed);

3、行内块元素(display: inline-block);

4、表格的单元格(display: table-cellsTD、TH);

5、表格的标题(display: table-captionsCAPTION);

6、'overflow' 特性不为visible 的元素(除非该值已经传播到viewport?);

 

二、BFC的三个特性:

  • BFC会阻止垂直外边距(margin-top、margin-bottom)折叠

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

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

  • BFC不会重叠浮动元素
  • BFC可以包含浮动

三、如何使用BFC:

例:

<style type="text/css">
body {

margin: 0;

}

.red {
width: 200px;
height: 150px;
float: left;
background: red;
}

.green {
height: 200px;
width: 300px;
background: green;
}
</style>
<body>
<div class="red"></div>
<div class="green"></div>
</body>

显示图:

BFC任性跑路的布局1

每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。

因此,此时即使在CSS的green里输入margin-top的值,它也是内嵌在一起,两个一起动。但我们可以通过清除浮动或触发green生成BFC, 来实现自适应两栏布局。

清除浮动:

.green{
clear: both;
}

触发green:

.green {
overflow: hidden;
}

显示图:

BFC任性跑路的布局1

 

更多相关文章
  • 洛谷1613 跑路 本题地址: http://www.luogu.org/problem/show?pid=1613 题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十分牛B的
  • 由position屬性引申的關于css的進階討論(包含塊、BFC、margin collapse)
    写这篇文章的起因是源于这篇文章:谈谈面试与面试题 中关于position的讨论,文中一开始就说的这句话: 面试的时候问个css的position属性能刷掉一半的人这是啥情况…… 其实这问题我本来打算的是可以顺着一路扯到normal flow.containing block.bfc.margin c
  • BFC的理解与应用 因为BFC的理解对我们完全地弄懂margin collapse是不可缺少的.所以让我们先来认识一下BFC. 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官
  • 最近面试了一些人,也在群上跟一些群友聊起,发现现在的互联网真是热,一些工作才两三年的期望的薪资都是十几K的起,这真是让我们这些早几年就成为程序猿的情何以堪!正所谓是站在风口上,猪也能飞起来!我在这里就根据我本人的经历,把参加工作这几年以来的一些热门的领域和技术列举一下,然后从我自身的角度点评一番.当
  • 2年8月9日 星期三       你听说过SEMA(软件工程测试与分析)吗?那是一个相对难懂的系统——用于衡量一个软件开发小组的好赖.停下来,别点击那个链接,弄懂那个系统兴许长达六年之久.我提出一个我自己的.不负责任
  • 在中国互联网领域里,互联网金融的发展时间几乎堪称最短,但互联网金融对国计民生和互联网经济所起到的促进与推荐作用,却远远超过其他任何互联网业务分支.在今天,基于移动终端和移动互联网的并行发展,以及互联网金融在普通大众生活.工作等领域的普遍应用,目前的互联网金融正在进入全新的生活服务领域,并以其巨大的渗 ...
  • 创建时间:2007-09-11 文章属性:原创 文章提交:wzt (wzt_at_xsec.org) Linux后门系列--由浅入深sk13完全分析(缩水版) 作者 wzt 联系方式 [email protected] 个人网站 http://tthacker.cublog.cn http://xsec.or ...
  • 我是2000年从黑龙江大学计算机软件专业毕业后到浙江宁波工作的,在大学当了一年网络中心的老师后,感觉自己还是疯狂喜欢软件行业,不太适应大学的工作环境,就跳槽到台资IT公司工作了,后来又到杭州工作了1年多,上海又去工作了接近1年,工作满5年后,我感觉自己在网络知识.数据库知识及B/S.C/S开发技术.
一周排行