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. php开发微信APP支付接口

    之前在开发APP中用到了微信支付,因为是第一次用,所以中途也遇到了好多问题,通过查看文档和搜集资料,终于完成了该功能的实现.在这里简单分享一下后台php接口的开发实例. 原文地址:代码汇个人博客 ht ...

  2. HBase 是列式存储数据库吗

    在介绍 HBase 是不是列式存储数据库之前,我们先来了解一下什么是行式数据库和列式数据库. 行式数据库和列式数据库 在维基百科里面,对行式数据库和列式数据库的定义为:列式数据库是以列相关存储架构进行 ...

  3. USING KERBEROS

    https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/6/html/managing_smart_cards/u ...

  4. 容易被误读的IOSTAT

    iostat(1)是在Linux系统上查看I/O性能最基本的工具,然而对于那些熟悉其它UNIX系统的人来说它是很容易被误读的.比如在HP-UX上 avserv(相当于Linux上的 svctm)是最重 ...

  5. YAML详解

    1   YAML简介 YAML,即YAML Ain’t Markup Language的缩写,YAML 是一种简洁的非标记语言.YAML以数据为中心,使用空白,缩进,分行组织数据,从而使得表示更加简洁 ...

  6. 【jq】prop和attr的区别

    prop()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性,返回值是空字符串. attr()函数的结果: 1.如果有相应的属性,返回指定属性值. 2.如果没有相应的属性, ...

  7. JDK内置工具使用（jps、jstack、jmap、jstat）

    一.JPS 1.jps -lvm:用于查看当前机器上已装载的jvm 二.jstackjstack命令主要用来查看Java线程的调用堆栈的,可以用来分析线程问题(如死锁) 1.jstack -l pid ...

  8. app原生和H5混合使用自动化

    1.从原生切换到H5需要 driver.switch_to.context('WEBVIEW_com.tencent.mm:tools') 2.参考连接: https://testerhome.com ...

  9. 函数rand，randn，randi

    1,rand 生成均匀分布的伪随机数.分布在(0~1)之间主要语法:rand(m,n)生成m行n列的均匀分布的伪随机数rand(m,n,‘double’)生成指定精度的均匀分布的伪随机数,参数还可以是 ...

  10. AI 强化学习

    强化学习(reinforcement learning,简称RL), agent policy state action 目标  最大化累计reward 参考链接: https://en.wikipe ...