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. vue中this在回调函数中的使用

    this在各类回调中使用: 如果是普通函数是没法使用的 所以需要先将this.变量赋值给新的变量,然后才能在回调函数中使用 例如: refund: function (id) { if (!this. ...

  2. Resnet——深度残差网络（二）

    基于上一篇resnet网络结构进行实战. 再来贴一下resnet的基本结构方便与代码进行对比 resnet的自定义类如下: import tensorflow as tf from tensorflo ...

  3. pycharm的这些配置，你都知道吗

    前言 对于一枚pycharm工具的使用新手,正确了解这门工具的配置,在使用过程中遇到的很多问题也可以迎刃而解哦!! 文章篇幅有限,本篇文章提供以下配置手段: 1.字体大小调整 2.显示你需要的工具窗口 ...

  4. django-分页（非海量数据）

    views.py class AnalysisDataHandler(View): def get(self, request): analysis_data = MonitorCenterDataA ...

  5. Element节点

    Element节点对象对应网页的 HTML 元素.每一个 HTML 元素,在 DOM 树上都会转化成一个Element节点对象(以下简称元素节点).元素节点的nodeType属性都是1.Element ...

  6. java-局部变量，成员变量区别

    1. 内存中的位置 成员变量: 堆内存 局部变量: 栈内存 2. 生命周期 成员变量:随着对象的创建而存在,随着对象的消失而消失 局部变量:随着方法的调用而存在,随着方法调用完毕而消失 3. 注意事项 ...

  7. PTA 1005 Spell It Right

    题目描述: Given a non-negative integer N, your task is to compute the sum of all the digits of N, and ou ...

  8. 轻量级RPC设计与实现第一版

    什么是RPC RPC (Remote Procedure Call Protocol), 远程过程调用,通俗的解释就是:客户端在不知道调用细节的情况下,调用存在于远程计算机上的某个对象,就像调用本地应 ...

  9. P2048 [NOI2010]超级钢琴 [堆+st表]

    考虑只能取长度为 [L,R] 的,然后不难想到用堆搞. 搞个前缀和的st表,里面维护的是一个 最大值的位置 struct rmq { int mx[N][20] ; void qwq(int n) { ...

  10. Linux connect: Network is unreachable

    在虚拟机中ping,发现网络不通: [root@node01 ~]# ping 114.114.114.114 connect: Network is unreachable 发生此问题时,环境如下: ...