BFC(Block formatting context)

直译为"块级格式化上下文"。

BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人。

不是所有的元素模式都能产生BFC,w3c 规范:

display 属性为 block, list-item, table 的元素,会产生BFC.

大家有么有发现这个三个都是用来布局最为合理的元素,因为他们就是用来可视化布局。

注意其他的,display属性,比如 line 等等,他们创建的是 IFC ,我们暂且不研究。

这个BFC 有着具体的布局特性:

BFC元素所具有的特性

BFC布局规则特性:

1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。

4.BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。

5.计算BFC的高度时,自然也会检测浮动的盒子高度。

它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

BFC的主要用途

BFC能用来做什么?

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了。

主要用到

计算BFC的高度时,自然也会检测浮动的盒子高度。

(2) 解决外边距合并问题

外边距合并的问题。

主要用到

盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。

 (3) 制作右侧自适应的盒子问题

主要用到

BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。

普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文

1.6 BFC 总结

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了。

我理解的BFC(块级格式化上下文)的更多相关文章

  1. CSS2系列:BFC(块级格式化上下文)IFC(行级格式化上下文)

    BFC 块级格式化上下文,不好理解,我们暂且把她理解成"具有特殊的一类元素" 哪些元素会生成BFC? 根元素 float属性不为none position为absolute或fix ...

  2. BFC块级格式化上下文

    BFC块级格式化上下文 触发条件 overflow 值不为 visible 的块元素 根元素 html 元素 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 ...

  3. BFC——块级格式化上下文

    BFC(块级格式化上下文) 一.BFC是什么? 从样式上看,具有BFC的容器和普通的容器没有区别.从功能上看,具有BFC的容器可以看作是隔离了的容器,容器里面的元素不会影响到外面的元素,并且BFC具有 ...

  4. BFC块级格式化上下文简述

    做过页面编写的各位应该对定位不陌生了,这个样式表中的重头戏,也是最难把控的元素之一,今天在这里我们要讲到的就是与浮动与清除浮动相关的定位元素,对于定位有很多种,有绝对定位,还有相对定位,固定定位,静态 ...

  5. BFC(块级格式化上下文)

    转载自:https://www.cnblogs.com/asheng2016/p/7281784.html https://blog.csdn.net/jiaojsun/article/details ...

  6. BFC(块级格式化上下文)笔记

    BFC特性: 1.BFC是一个独立的布局容器,内部元素不会影响BFC外面的元素,反之亦然. 2.计算BFC高度时,会计算内部的浮动元素. 3.BFC会阻止外边距的合并. 4.BFC的区域不会与外部浮动 ...

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

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

  8. 详解块级格式化上下文(BFC)

    相信大家和我一样,第一次听到别人说CSS 块级格式化上下文(block formatting context,简称:BFC)的时候一头雾水,为了帮助大家弄清楚块级格式化上下文,我翻阅了W3C的CSS规 ...

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

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

随机推荐

  1. CM+CDH大数据平台

    我这里搭建的是3节点,centos6.5的静态ip ,ssh免密码登录,防火墙关闭,时钟同步等等一些准备工作我这里就不多说了 我们可以进官网看看 https://www.cloudera.com/ 我 ...

  2. 值得收藏的45个Python优质资源

    REST API:使用 Python,Flask,Flask-RESTful 和 Flask-SQLAlchemy 构建专业的 REST API https://www.udemy.com/rest- ...

  3. ~Vue实现简单答题功能,主要包含单选框和复选框

    内容 实现简单答题效果 环境 Vue,webpack(自行安装) 实现方式 页面将答题列表传递给调用组件,组件将结果返回给调用页面(其它模式也ok,这只是例子) ------------------- ...

  4. jQuery实现点击控制左右两边元素挤压显示效果

    该功能实现的是:分左.右两边布局,左边div默认展开,左边div中有一个元素,点击实现左边div隐藏,右边div挤压过来:再点击实现左边显示,右边挤过去. 一.HTML代码: <div clas ...

  5. js解析多层嵌套的json,取出所有父元素属性和遍历所有子元素

    已知一个多层嵌套的json,取出所有父元素和子元素的id值 思路:因为不知道到底嵌套了多少层,递归有可能造成栈溢出.查询时间特别久的问题 所以先查询一次,判断是否有子节点,如果有,取出子节点并到父节点 ...

  6. c# 中实用包,实用dll。

    Aspose.cell:用与操作Excel,生成,导入导出等. ICSharpCode.SharpZipLib.dll:用户压缩及解压ZIP包,根据需要也可以加密.

  7. CSS3的过渡和转换

    CSS3的过渡和转换 1.过渡 什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果. 过渡的属性: 属性 描述 css transition 简写属性,用于在一个属性中设置4个 ...

  8. unicode转中文以及str形态的unicode转中文

    今天在工作中遇到这样一个问题(工作环境为Python2.7.1),需要将一个字典中字符串形态的Unicode类型的汉字转换成中文,随便总结一下: 1.unicode转中文 old = u'\u4e2d ...

  9. #151: 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字、1位识别码和3位分隔符,其规定格式如“x-xxx-x

    试题描述 每一本正式出版的图书都有一个ISBN号码与之对应,ISBN码包括9位数字.1位识别码和3位分隔符,其规定格式如“x-xxx-xxxxx-x”,其中符号“-”是分隔符(键盘上的减号),最后一位 ...

  10. PHP中json_encode()问题

    PHP 生成JSON的时候,必须将汉字不转义为 \u开头的UNICODE数据. 要想不转义,在后面加个参数即可 json_encode($data, JSON_UNESCAPED_UNICODE);  ...