W3C 规范中 BFC的定义：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

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

……更多内容参考：https://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html

深入理解 BFC的更多相关文章

  1. 全面理解BFC

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

  2. 深入理解BFC和Margin Collapse

    深入理解BFC和Margin Collapse   BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威 ...

  3. 理解 BFC

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章, 介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等). 虽然我知道如何利用 BFC 解决这些问 ...

  4. 10分钟理解BFC原理

    10 分钟理解 BFC 原理 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照 ...

  5. 理解BFC

    BFC:块格式化上下文(Block Formatting Context) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域. BFC 是一 ...

  6. 10 分钟理解 BFC 原理

    一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: 普通流 (normal flow) 在普通流中,元素按照其在 HTML 中的先后位置至 ...

  7. 深入理解BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  8. 深入理解BFC

    定义 在解释BFC之前,先说一下文档流.我们常说的文档流其实分为定位流.浮动流和普通流三种.而普通流其实就是指BFC中的FC.FC是formatting context的首字母缩写,直译过来是格式化上 ...

  9. 深入理解BFC和外边距合并(Margin Collapse)

    一.什么是BFC? 1.BFC的概念 BFC全称Block Formatting Context ,直译“块级格式化上下文”,也有译作“块级格式化范围”.它是 W3C CSS 2.1 规范中的一个概念 ...

  10. CSS学习笔记09 简单理解BFC

    引子 在讲BFC之前,先来看看一个例子 <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

随机推荐

  1. eclispe file查找

    今天查找一段js代码时在本页内找不到,所以需要在整个工程下寻找. 过程如下

  2. TCP程序设计基础

    1.端口与套接字 IP地址--->端口--->套接字(Socket)--->应用程序 2.TCP服务器端和客户端通信 1)服务器创建一个ServerSocket,调用accept() ...

  3. 个人作业 - Week3 - 案例分析

    调研与评测 真实用户采访: 用户姓名: 刘斯盾 用户的背景和需求: 用户是一位计算机专业学生,需要浏览技术博客来扩充自己的学识. 用户使用博客园证明: 产品是否解决用户问题: 在码代码过程中遇到的很多 ...

  4. PAT 1047 编程团体赛

    https://pintia.cn/problem-sets/994805260223102976/problems/994805277163896832 编程团体赛的规则为:每个参赛队由若干队员组成 ...

  5. mysql学习笔记二 —— 权限体系

    要点: 1.MySQL的API2.MySQL的相关文件3.MySQL的权限体系 1.MySQL的API 应用程序接口 (application program interface) 1.1 命令行中的 ...

  6. Lodop客户端本地角色注册号常见误区

    之前写过一篇关于Lodop和c-lodop注册号的区别:LODOP.C-LODOP注册号的区别第一种角色客户端本地打印角色是最常见的角色,最常见的场景,关于c-lodop云打印,它的第一种角色是取代L ...

  7. appium学习记录 elements默认获取第一个元素

    封装 初始配置时候 要当做参数传入 element 发送的是一个元组 2  下标定位 当用elements进行定位时候 同时又有很多元素时候 默认获取第一个,但我们的元素是在后面时候 例如第四个 el ...

  8. golang自定义struct字段标签

    原文链接: https://sosedoff.com/2016/07/16/golang-struct-tags.html struct是golang中最常使用的变量类型之一,几乎每个地方都有使用,从 ...

  9. mybatis的缓存机制（一级缓存二级缓存和刷新缓存）和mybatis整合ehcache

    1.1  什么是查询缓存 mybatis提供查询缓存,用于减轻数据压力,提高数据库性能. mybaits提供一级缓存,和二级缓存. 一级缓存是SqlSession级别的缓存.在操作数据库时需要构造 s ...

  10. MT【73】求函数表达式

    评:由关系式求表达式最经典的莫过于已知$f(x+y)=f(x)f(y)$利用柯西法求得 $f(x)=[f(1)]^x$