定义
块级格式化上下文
 
特性
1、内部box在垂直方向,一个接一个放置
2、box垂直方向的间距由margin决定
   属于同一个BFC的相邻box的margin会发生重叠(外边距重叠)
     解决方法:给父元素加overflow:hidden,并把其中一个子元素放进另一个box中 
3、每个子元素的margin-left与包含块的左边(父元素且有相对定位和boeder-left)相接触(对于从左往右的格式化,否则相反)浮动也一样
    即margin-left和border-left相挨着
4、BFC区域不会与任何浮动元素(float box)发生重叠
    触发条件中的(2、4、5)可解决重叠问题
    可实现自适应两栏布局
    一个给宽且固定并左浮动,一个不给宽但用overflow:hidden/auto/scroll或者用display:flex,超出页面用overflow:hidden隐藏
5、独立的区域,且容器内的子元素不会影响到容器之外的元素,反之也一样
6、计算BFC高度时,浮动元素也会参与计算(默认下,浮动元素不参与计算)
    可解决高度塌陷
 
触发条件
1、根元素    html
2、float属性值不为none时
3、position为absolute或者fixed时
4、display为inline-block、table-cell、table-caption、flex、inline-flex时
5、overflow不为visible时
    只要满足以上任何一条,都会触发BFC,且是父元素触发

BFC概念及应用的更多相关文章

  1. BFC概念和作用,触发条件

    1.概念,全称是block format context,块级格式化上下文 2.触发条件 根元素 float属性不为none position为absolute或fixed display为inlin ...

  2. 我们常用,却容易忽视——CSS的BFC(Block formatting contexts)

    BFC——一个我们容易忽视掉的布局神器 今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w ...

  3. BFC——一个我们容易忽视掉的布局神器

      今天给大家说说BFC这个概念,在说概念前,先给大家看个例子: 首先,定义三个div块元素   效果: 我们发现,块级元素的排列顺序是从上往下,一块接着一块,在w3c中,是这样解释block-lev ...

  4. 【笔记】BFC 模型知识整理

    网上看了很多 BFC 的概念,发现都说得不是很完整和深入,刚好最近看了一些视频教程说到了 BFC 概念所以记录一下. BFC 的概念: BFC 全称:Block format context 块级格式 ...

  5. 近视BFC

    首先按照常规解释一下名词,BFC(Block formatting context)直译为"块级格式化上下文".一个独立的渲染区域,只有Block-level box参与, 它规定 ...

  6. 10 分钟理解 BFC 原理

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

  7. 什么是BFC? CSS 如何使用伪元素清除浮动?

    .BFC概念: 块级格式化上下文,是一个独立的渲染区域,让处于 BFC 内部的元素与外部的元素相互隔离,使内外元素的定位不会相互影响. 我们先了解一个名词:BFC(block formatting c ...

  8. 10分钟理解BFC原理

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

  9. 浅析前端BFC布局

    一.常见定位方案 二.BFC 概念 BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流. 它是一个独立的渲染区域,只有Block-leve ...

随机推荐

  1. fork调用实验-缓冲区相关

    先看下面一段代码: #include <unistd.h> #include <stdio.h> ; char buf[] = "a write to stdout\ ...

  2. 使用自己的域名解析cnblogs博客(CSDN也可以)

    本文主要介绍怎样使用自己购买的域名指向cnblogs博客 通常来说技术人员都会创建个自己的技术博客,总结下工作中的问题,经验等等,不过某些博客的访问链接的确是不太容易记忆或者输入,对我们分享造成一定的 ...

  3. Complete the Word

    ZS the Coder loves to read the dictionary. He thinks that a word is nice if there exists a substring ...

  4. Word所有字体按比例缩小

    ctrl + [ 不然每次都要一部分一部分的修改啊

  5. CTF-练习平台-WEB之 web2

    二.web2 打开连接发现... 在火狐浏览器里,按F12点击查看器就可以发现flag

  6. list.stream().parallel() 并行流

    https://blog.csdn.net/u011001723/article/details/52794455/  :  parallel()其实就是一个并行执行的流.它通过默认的ForkJoin ...

  7. PHP mongodb 的使用

    mongodb 不用过多的介绍了,NOSQL的一种,是一个面向文档的数据库,以其方便灵活的数据结构,对于开发者来说是比较友好的,同时查询的速度也是比较快的,现在好多网站 开始使用mongodb ,具体 ...

  8. 基于DRL和TORCS的自动驾驶仿真系统——之环境配置

    基于DRL和TORCS的自动驾驶仿真系统 --之环境配置 玩TORCS和DRL差不多有一整年了,开始的摸爬滚打都是不断碰壁过来的,近来在参与CMU的DRL10703课程学习和翻译志愿者工作,也将自己以 ...

  9. c#问题(按F1或F2键时触发事件)

    this.KeyPreview = true;...private void Form1_KeyDown(object sender, System.Windows.Forms.KeyEventArg ...

  10. 洛谷 3784(bzoj 4913) [SDOI2017]遗忘的集合——多项式求ln+MTT

    题目:https://www.luogu.org/problemnew/show/P3784 https://www.lydsy.com/JudgeOnline/problem.php?id=4913 ...