一、BFC的概念

GFC——block fomatting context(中文译为块级格式化上下文)

二、 如何触发BFC

1. 设置 float 除 none 以外的值(left、right)

2. 设置 overflow 除 visible 以外的值(hidden、scroll、auto)

3. 设置 display 属性(如 table-cell、inline-block、flex)

4. 设置 position 属性(如 absolute、fixed)

三、 BFC的作用

1. 利用BFC解决上下margin重叠问题

多个p元素之间设置上下margin，只能识别其中的一个值，给p元素外层在嵌套一个元素，并设置overflow: hidden; 就为里面的p元素创建一个块级格式化上下文

2. 利用BFC可以解决高度塌陷问题

父元素没有设置高度，子元素float后脱离了正常文档流，不再占据空间，给父元素overflow: hidden; 就给浮动的子元素创建了一个块级格式化上下文，闭合了浮动

3. 利用BFC实现多栏布局

与浮动元素相邻的已生成BFC的元素不能与浮动元素互相覆盖，利用该特性可以作为多栏布局的一种实现方式

BFC的概念、BFC触发方式、BFC作用介绍的更多相关文章

  1. BFC是什么？有什么作用？

    BFC(Block Formatting Context)直译为“块级格式化范围”. 一.常见定位方案 在讲 BFC 之前,我们先来了解一下常见的定位方案,定位方案是控制元素的布局,有三种常见方案: ...

  2. RRTI的概念以及Class对象作用

    深入理解Class对象 RRTI的概念以及Class对象作用 认识Class对象之前,先来了解一个概念,RTTI(Run-Time Type Identification)运行时类型识别,对于这个词一 ...

  3. Dubbo入门到精通学习笔记（七）：基于Dubbo的分布式系统架构介绍（以第三方支付系统架构为例）、消息中间件的作用介绍

    文章目录 架构简单介绍 消息中间件在分布式系统中的作用介绍 消息中间件的定义 消息中间件的作用 应用场景 JMS(Java Message Service) JMS消息模型 实现了JMS规范的消息中间 ...

  4. css基本概念与css核心语法介绍

    css基本概念 css是什么?不需要了解太多文字类介绍,记住css是层叠样式表,HTML是页面结构,css负责页面样式,javascrt负责静态页面的交互.CSS 能够对网页中元素位置的排版进行像素级 ...

  5. BFC的概念及作用

    在了解什么是BFC之前,首先得明白什么是Box , Formatting Context (一个决定如何渲染文档的容器)的概念 Box: CSS布局的基本单位 Box是 CSS 布局的对象和基本单位, ...

  6. html/css中BFC的开启、关闭、作用

    什么是BFC BFC是什么并不重要.重要的是开启它干嘛?以及如何开启它 根据W3C的标准,在页面中元素都一个隐含的属性叫做Block Formatting Context(块级 格式化 环境)简称BF ...

  7. Java内部类的四种分类以及作用介绍

    内部类内容解析 内部类的区分 内部类分别有成员内部类.局部内部类.匿名内部类.静态内部类,接下来将分别介绍. 成员内部类 就是位于外部类成员位置的类.与外部类的属性.方法并列. 成员内部类作为外部类的 ...

  8. Asp.Net Core 轻松学-项目目录和文件作用介绍

    前言     上一章介绍了 Asp.Net Core 的前世今生,并创建了一个控制台项目编译并运行成功,本章的内容介绍 .NETCore 的各种常用命令.Asp.Net Core MVC 项目文件目录 ...

  9. Linux内核中的jiffies及其作用介绍及jiffies等相关函数详解

    在LINUX的时钟中断中涉及至二个全局变量一个是xtime,它是timeval数据结构变量,另一个则是jiffies,首先看timeval结构struct timeval{time_t tv_sec; ...

随机推荐

  1. 【Spark机器学习速成宝典】模型篇06随机森林【Random Forests】（Python版）

    目录 随机森林原理 随机森林代码(Spark Python) 随机森林原理 参考:http://www.cnblogs.com/itmorn/p/8269334.html 返回目录 随机森林代码(Sp ...

  2. vue组件化初体验 全局组件和局部组件

    vue组件化初体验 全局组件和局部组件 vue组件化 全局组件 局部组件  关于vue入门案例请参阅 https://www.cnblogs.com/singledogpro/p/11938222.h ...

  3. Jenkins发布

    右键查看图片显示全图

  4. redis详解及应用（雪崩、击穿、穿透）

    一. redis的简介与安装 引用:https://www.cnblogs.com/ysocean/tag/Redis%E8%AF%A6%E8%A7%A3/ 二. redis的配置文件介绍 引用:ht ...

  5. Jmeter(三)关联数组

    上一篇贴子讲到了利用后置处理器中的正则表达式实现了关联, 可以获取特定的动态参数. 但是还不能实现phpwind的随机发贴. 要实现随机发贴, 我们只用做一点小小修改就可以实现了. 匹配数字: 在匹配 ...

  6. Cinder LVM backend cinder-volume service down

    目录 文章目录 目录 问题 调查 解决 问题 [stack@manager ~]$ cinder service-list +------------------+------------------ ...

  7. 三十三：数据库之SQLAlchemy.filter常用的过滤条件

    准备数据 等于 不等于 like(区分大小写,模糊查询).ilike(不区分大小写) in not in(~,取反) 字段为空 不为空 and or

  8. python学习笔记：（九）循环（for和while）

    在python中循环包括for和while 1.while循环 while 判断条件: statements ----表示:判断条件为真时执行statements,为假不执行 2.for语句 for ...

  9. python调用dll详解

    参考链接https://www.cnblogs.com/TQCAI/p/8881530.html https://www.jb51.net/article/52513.htm https://www. ...

  10. Spring Boot 自定义注册 Servlet、Filter、Listener

    前言 在 Spring Boot 中已经移除了 web.xml 文件,如果需要注册添加 Servlet.Filter.Listener 为 Spring Bean,在 Spring Boot 中有两种 ...