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. phpcms v9编辑器上传图片是否添加水印

    第一步:给图片上传对话框里面添加是否添加水印的多选框,找到: satics/js/ckeditor/ckeditor.js 第17554行 (需要格式化,我用的NetBeans)修改为 functio ...

  2. RedisDeskTopManager连接时提示:can't nonnect to redis-server

    场景 在使用RedisDeskTopManager客户端可视化工具连接Redis服务端时提示: 注: 博客: https://blog.csdn.net/badao_liumang_qizhi关注公众 ...

  3. jsp的九大内置对象+四大作用域

    1.request是httpServletRequest的对象,代表发送的请求信息 2.response是httpServletResponse的对象,代表响应请求返回的信息 3.session会话是 ...

  4. 快速读写模板（int）

    一.快速读入模板(int) inline int read(int x){ char ch=getchar(); int x=0,f=1; while(ch>='9'||ch<='0'){ ...

  5. python——面向对象(1),基础

    """面向对象:抽象化编程思想.类,对象:用类来创建(实例化)对象.类:一系列特征和行为相同的事物总和, 1.属性:特征 2.行为:方法 定义类 :PEP 8要求标识符的 ...

  6. 【笔记】机器学习 - 李宏毅 - 5 - Classification

    Classification: Probabilistic Generative Model 分类:概率生成模型 如果说对于分类问题用回归的方法硬解,也就是说,将其连续化.比如 \(Class 1\) ...

  7. 怎么解决Chrome浏览器“Failed to load resource: net::ERR_INSECURE_RESPONSE”错误？

    用科学方法安装的arcgisServer,需要修改系统时间,但是修改了系统时间,可能会出各种问题, office 不能正确验证,chrome 不能正常使用,访问网页, 如果直接输入本地地址进行访问的话 ...

  8. STL-deque 双端数组简析

    #include <iostream> #include <deque> using namespace std; int main() { // 插入 deque<in ...

  9. 阻止a链接跳转的点击事件

    <a href="http://www.baidu.com" id="btn">按钮</a> <script> docume ...

  10. gulp常用插件之http-proxy-middleware使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 http-proxy-middleware这是一个用于后台将请求转发给其它服务器.其实这并不是转给gulp使用的,在其它构建工具也可以用. 更多使 ...