BFC特性:

1.BFC是一个独立的布局容器，内部元素不会影响BFC外面的元素，反之亦然。

2.计算BFC高度时，会计算内部的浮动元素。

3.BFC会阻止外边距的合并。

4.BFC的区域不会与外部浮动元素的区域重叠

触发条件:

1. float不为none

2.position: fixed absolute

3.overflow: hidden scroll auto

4.display: inline-block/ table-cell/ table-caption / flex /inline-flex

应用场景:

1.子元素浮动导致父元素坍塌(用于清除浮动，运用特性2)

2.上下margin合并问题 (运用特性3)

3.左右两栏自适应布局( 运用特性4)

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(块级格式化上下文)

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

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

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

  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. Python学习零基础＜入门必学＞

    1. 注释注释 是任何存在于 # 号右侧的文字,其主要用作写给程序读者看的笔记. 2. 字面常量一个字面常量(Literal Constants)的例子是诸如 5.1.23 这样的数字,或者是如 这是 ...

  2. [菜b]Isaunoya 的一些学习笔记…[保持咕咕咕]

    fread/fwrite标记永久化 分块 树链剖分 莫比乌斯反演 斜率优化/单调队列 kruskal重构树 回滚莫队 可持久化线段树/trie树 Link-Cut-Tree dsu on tree F ...

  3. centos7安装opencv3.4.1（同样适用于最新版本4.2.0）

    安装cmake3: echo '[group_kdesig-cmake3_EPEL]name=Copr repo for cmake3_EPEL owned by @kdesigbaseurl=htt ...

  4. asp.net mvc 使用AuthorizeAttribute做授权验证

    授权验证,比如登陆验证 1.自定义属性继承AuthorizeAttribute 2.重写OnAuthorization方法 3.通过AllowAnonymousAttribute特性处理无需授权的Ac ...

  5. 消息队列 ActiveMQ的简单了解以及点对点与发布订阅的方法实现ActiveMQ

    Apache ActiveMQ是Apache软件基金会所研发的开放源代码消息中间件: 由于ActiveMQ是一个纯Java程序,因此只需要操作系统支持Java虚拟机,ActiveMQ便可执行. Act ...

  6. Umi 小白纪实（二）—— model 的注册与使用

    Umi 通常会搭配 Dva 使用,用于管理页面状态和逻辑 一.注册 model 首先需要在 .umirc.js 中启用 dva 插件 export default { plugins: [ ['umi ...

  7. 分布式任务调度XXL-JOB初体验

    简介 XXL-JOB是一个轻量级分布式任务调度平台,其核心设计目标是开发迅速.学习简单.轻量级.易扩展.现已开放源代码并接入多家公司线上产品线,开箱即用. 官方文档很完善,不多赘述.本文主要是搭建XX ...

  8. 通俗易懂的RESTful API实践详解（含代码）

    来源:点击进入 点击上方链接,版面更好 一.什么是RESTful REST 是面向资源的,这个概念非常重要,而资源是通过 URI 进行暴露,URI 的设计只要负责把资源通过合理方式暴露出来就可以了,对 ...

  9. 吴裕雄--天生自然HADOOP操作实验学习笔记：hbase的shell应用v2.0

    HRegion 当表的大小超过设置值的时候,HBase会自动地将表划分为不同的区域,每个区域包含所有行的一个子集.对用户来说,每个表是一堆数据的集合,靠主键来区分.从物理上来说,一张表被拆分成了多块, ...

  10. 关于跨域cookie，在代码无问题下，浏览器set-cookie显示有内容，但浏览器没写入cookie（刷新没有cookie）

    在排除了代码的问题后,如 Domain 不一致,过期时间是基于当前时间增加过期时效的. 在排查返回请求时发现是过期时间的问题,设置的过期时间(Expire)小于请求的时间(Date)时,浏览器就会写不 ...