一、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. 自定义ItemDecoration设置分割线

    说道ItemDecoration不得不说三个方法: /** * @param c 画布 * @param parent RecyleView * @param state RecyclerView的当 ...

  2. ZooKeeper java例子解读

    转载链接:https://blog.csdn.net/liyiming2017/article/details/83276706 需求理解我们先回顾一下例子的需求,此客户端有如下四个需求: 1.它接收 ...

  3. Win7、win8、win10下实现精准截获Explorer拷贝行为

    介绍了windows下对Explorer的拷贝动作的精确截获,这个在企业数据安全dlp产品系列中减少审计的噪音很有效,方便运营人员做针对性的审计. 在企业数据安全中我通常需要监测用户的拷贝行为,特别像 ...

  4. Why 0.1 + 0.2 === 0.30000000000000004 ?

    Why 0.1 + 0.2 === 0.30000000000000004 ? 在浮点数运算中产生误差值的示例中,最出名应该是0.1 + 0.2 === 0.30000000000000004了,到底 ...

  5. Array 操作

    一.数组拉平 function arrayFlat(arr) { return arr.reduce((pre, cur) => { const temp = Array.isArray(cur ...

  6. golang RPC通信读写超时设置

    golang RPC通信中,有时候就怕读写hang住. 那是否可以设置读写超时呢? 1.方案一: 设置连接的读写超时 1.1 client RPC通信基于底层网络通信,可以通过设置connection ...

  7. python3使用ltp语言云

    text="我爱自然语言处理." text=str(text) #text=urllib.quote(text) text=urllib.parse.quote(text) def ...

  8. python 实验3 循环结构

    实验一   九九乘法表 ‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪描述:输出一个九九乘法表,格式如下:‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪‪‪‪‪‫‪ 1*1=1‪‪ ...

  9. 三十八：数据库之ORM层面删除数据的注意事项

    准备工作 from sqlalchemy import create_engine, Column, Integer, String, Float, Text, ForeignKeyfrom sqla ...

  10. Python的组合模式与责任链模式编程示例

    Python的组合模式与责任链模式编程示例 这篇文章主要介绍了Python的组合模式与责任链模式编程示例,组合模式与责任链模式都属于Python的设计模式,需要的朋友可以参考下 组合模式 我们把Com ...