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. 网页DIV+CSS布局与ifame传统布局对比

    通常我们从设计师手上拿到设计稿,按照功能划分为很多小块,然后再利用div+css写成静态页面按照设计稿排列还原,最后把具体内容填充到小块里面.网页布局就是你想要的页面功能在你拿到设计图切块完成重新排列 ...

  2. 使用placeholder属性设置input文本框的提示信息

    input文本框中设置提示信息,可以使用placeholder属性 <!DOCTYPE html> <html> <head> <meta charset=& ...

  3. P1843 奶牛晒衣服

    链接:Miku -------------------------------- 这是一道二分答案的题,我们要二分时间. 对于每件衣服,我们自然是能让它自己蒸发就自己蒸发,这样才是最优的. 那么我闷可 ...

  4. AGC018F - Two Trees

    题意 有两棵节点数均为 n 的有根树,你需要构造一个序列 \(X_1,X_2,...,X_n\).使得对于每一棵树的每一个节点, 若令它所有的后代(包括它本身)为 \(a_1,a_2,...,a_k\ ...

  5. 常用 Jenkins 配置

    General Use custom workspace Directory: {directory, d:\github\} Source Code Management Git plugin Gi ...

  6. honeywell1900扫描枪的使用说明

    霍尼韦尔1900扫描枪驱动是honeywell1900扫描枪的USB驱动,就是扫描枪usb转com,如果你的系统是32位的,就直接运行Install_x86.bat,如果是64位的,就运行Instal ...

  7. 吴裕雄--天生自然HADOOP操作实验学习笔记：hbase学生选课案例

    实验目的 复习hbase的shell操作和javaAPI操作 了解javaWeb项目的MVC设计 学会dao(数据库访问对象)和service层的代码编写规范 学会设计hbase表格 实验原理 前面我 ...

  8. Tomcat中使用JNDI配置各种数据源

    最近接手了一个离职同事的老项目,全是XML配的,看的我贼难受,不过了解下配置原理还是有好处的 1.MySql <Resource name ="cockpitTest" au ...

  9. C# 中indexOf、lastIndexOf、subString方法的理解

    一.indexOf() indexOf("\\"):返回"\\"字符在此实例中第一个出现的索引位置,实例的下标是从0开始,如果未找到则返回-1. indexOf ...

  10. JS基础-内置对象【字符串+Date+Math】

    JS内置对象[字符串] // charAt() 返回字符 // charCodeAt() 返回字符的unicode编码 var str="hello world"; console ...