BFC块级格式化上下文

  1. 触发条件

    1. overflow 值不为 visible 的块元素
    2. 根元素 html 元素
    3. 浮动元素（元素的 float 不是 none）
    4. 绝对定位元素（元素的 position 为 absolute 或 fixed）
    5. display 为这类值...
      • flow-root
      • inline-block
      • table-cell
      • flex
      • inline-flex
  2. 应用
    1. 外边距塌陷
    2. 让浮动内容和周围的内容等高
    3. 2栏布局

MDN:块格式化上下文

CSS深入理解流体特性和BFC特性下多栏自适应布局

BFC块级格式化上下文的更多相关文章

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

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

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

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

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

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

  4. 我理解的BFC(块级格式化上下文)

    BFC(Block formatting context) 直译为"块级格式化上下文". BFC它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Bl ...

  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. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

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

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

  9. 详解块级格式化上下文（BFC）

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

随机推荐

  1. idea软件破解汉化

    →http://idea.lanyus.com/上可以找到最新的破解补丁,下载并放到软件的bin目录下  →更改bin目录下的两个文件:Idea.exe.vmoptions和Idea64.exe.vm ...

  2. 使用Flame Graph进行系统性能分析

    关键词:Flame Graph.perf.perl. FlameGraph是由BrendanGregg开发的一款开源可视化性能分析工具,形象的成为火焰图. 从底向上像火苗一样逐渐变小,也反映了相互之间 ...

  3. .Net Core应用框架Util介绍（六）

    前面介绍了Util是如何封装以降低Angular应用的开发成本. 现在把关注点移到服务端,本文将介绍分层架构各构造块及基类,并对不同层次的开发人员应如何进行业务开发提供一些建议. Util分层架构介绍 ...

  4. 二十八、layui的日历组件使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. AtCoDeerくんと選挙速報 / AtCoDeer and Election Report AtCoder - 2140 （按比例扩大）

    Problem Statement AtCoDeer the deer is seeing a quick report of election results on TV. Two candidat ...

  6. 控制结构(4): 局部化（localization）

    // 上一篇:状态机(state machine) // 下一篇:必经之地(using) 基于语言提供的基本控制结构,更好地组织和表达程序,需要良好的控制结构. 前情回顾 上一次,我们说到状态机结构( ...

  7. redis info

    redis命令详细文档可参考:http://redisdoc.com/index.html info命令显示redis详细的状态信息. 命令的基本用法有三种: 1)info:部分redis状态统计信息 ...

  8. jQuery 事件冒泡

    1 . 什么是冒泡 在页面上可以有多个事件,也可以多个元素响应同一个事件.假设网页上有两个元素,其中一个元素嵌套在另一个元素里,并且都被绑定了 click 事件,同时<body>元素上也绑 ...

  9. SQLiteOpenHelper+ContentProvider的使用

    效果图: PetDbHelper package com.example.admin.pets; import android.content.Context;import android.datab ...

  10. Linux--虚拟环境

    一 . 虚拟环境的安装 如果我们在进行多个django项目的话,只用一个物理环境的话,那么会影响效率,这时候我们局可以应用虚拟环境了 virtualenv #指定清华源下载pip的包 pip3 ins ...