一、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. 剑指offer32----之字形打印一颗二叉树

    题目 请实现一个函数按照之字形打印二叉树,即第一行按照从左到右的顺序打印,第二层按照从右至左的顺序打印,第三行按照从左到右的顺序打印,其他行以此类推. 思路 在这里我们如果单纯的使用队列去弄的话,会很 ...

  2. 第九周学习总结&实验报告（7）

    完成火车站售票程序的模拟. 要求: (1)总票数1000张; (2)10个窗口同时开始卖票; (3) 卖票过程延时1秒钟; (4)不能出现一票多卖或卖出负数号票的情 况 实验代码: package y ...

  3. echarts_04

    通过ajax加载本地文件: 1.http://www.cnblogs.com/qjqcs/archive/2016/09/07/5850282.html 2.http://blog.csdn.net/ ...

  4. ActiveMQ配置文档

    本文介绍一对一.一对多.持久化.非持久化消息配置方式 一.创建项目 导入jar 二.创建MQ.xml <!-- 配置JMS连接工厂 --> <bean id="connec ...

  5. jenkins docker 发布

    分享下怎么使用jenkins 发布 docker   首先准备docker的相关部分 docker tomcat基础镜像,这边使用centos7做系统,dockerfile如下: #tomcat基础镜 ...

  6. Golang的面向对象编程【结构体、方法、继承、接口】

    Golang也支持面向对象编程.但与以前学过传统的面向对象编程语言有区别.1)Golang没有类class,Go语言的结构体struct和类class有相似的特性.2)Golang中不存在继承,方法重 ...

  7. AWSome Day简介

    AWSome Day是什么? 它是一场为时一天.结合教育与技术新知的云计算技术免费研讨会.是面向所有开发人员.IT技术人员.或技术/业务领域决策者必备的基础云计算课程.AWS专业级讲师将在现场带领您从 ...

  8. SpringBoot常用注解有哪些？

    @Service: 注解在类上,表示这是一个业务层bean@Controller: 注解在类上,表示这是一个控制层bean@Repository: 注解在类上,表示这是一个数据访问层bean@Comp ...

  9. djangourl进阶

  10. Linux 根据端口快速停止服务并启动的办法

    0. 需要使用 lsof 的命令, 如果linux 上面没有安装的话 需要自行安装 yum install lsof or apt-get install lsof 1. 先根据端口查进程号 [roo ...