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. 硬件知识整理part4--0欧电阻在电路中的应用

    逝者如斯夫,不舍昼夜. --<论语子罕篇> 说起0欧电阻,必须先铺垫一下电路中的各种地. 先说一下,地是什么??地是参考0电位,所有电压都是参考地得出的,地的标准要一致,故各种地应短接在一 ...

  2. Leetcode字典树-720:词典中最长的单词

    第一次做leetcode的题目,虽然做的是水题,但是菜鸟太菜,刚刚入门,这里记录一些基本的知识点.大佬看见请直接路过. https://leetcode-cn.com/problems/longest ...

  3. fatal: HttpRequestException encountered

    报错:fatal: HttpRequestException encountered 解决方法 Github 禁用了TLS v1.0 and v1.1,必须更新Windows的git凭证管理器,才行. ...

  4. [CodeIgniter4]讲解-启动流程

    https://codeigniter.org.cn/forums/thread-31030-1-1.html CodeIgniter 是一个小巧但功能强大的 PHP 框架,作为一个简单而“优雅”的工 ...

  5. Java遍历字符串数组的几种方法

    1. for循环 for(int i = 0; i < fields[].length; i++){ } 2 for each循环 for(String x:fields){ } 3. JDK8 ...

  6. 第7章.字符串、String类和StringBuilder类

    参考链接: https://www.runoob.com/csharp/csharp-string.html https://www.cnblogs.com/cang12138/p/7323709.h ...

  7. poj 2528 线段树区间修改+离散化

    Mayor's posters POJ 2528 传送门 线段树区间修改加离散化 #include <cstdio> #include <iostream> #include ...

  8. SqlServer 常用语句方法

    批量生成删表语句 select 'drop table '+b.name+'.'+a.name+';' from sys.tables a left join sys.schemas b on a.s ...

  9. 小白的java学习之路 “ 二重循环”

    二重循环: 1.什么是二重循环: 一个循环体内又包含另一个完整的循环结构 语法: while(循环条件1) { //循环操作1 while(循环条件2) { //循环操作2 } } do { //循环 ...

  10. ng-指令

    在 Angular 中最常用的指令分为两种,它们分别是 属性型指令 和 结构型指令. NgClass 作用:添加或移除一组 CSS 类 NgStyle 作用:添加或移除一组 CSS 样式 NgMode ...