一、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. 深入理解java集合

    集合 Java集合分为三大接口:①Collection ②Map ③Iterator

  2. WPF 打字效果

    看到有篇是用关键字动画来做的,感觉性能不是很好,万一字太多,比如几百上千个字那会加几百上千个关键帧... 下面是我自己写的: public MainWindow() { InitializeCompo ...

  3. 精简版 Selenium PageFactory, Annotation 实例

    精简版 Selenium  PageFactory, Annotation 实例. 先是类: HomePage package com.test;import org.openqa.selenium. ...

  4. emqtt emq 的主题访问控制 acl.conf

    访问控制(ACL) EMQ 消息服务器通过 ACL(Access Control List) 实现 MQTT 客户端访问控制. ACL 访问控制规则定义: 允许(Allow)|拒绝(Deny) 谁(W ...

  5. MQTT主题Topic讲解

    文章转载于https://www.cnblogs.com/hayasi/p/7792191.html 我们已经把相关的连接报文搞定了.笔者想来想去还是决定先讲解一下订阅报文(SUBSCRIBE ).如 ...

  6. 【10】css设置文字不换行，超过的部分用“...”代替

    设置文字不换行,超过的部分用“...”代替  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;  width: 210 ...

  7. flutter textfield

    释放光标 FocusScope.of(context).unfocus() 输入类型 keyboardType: TextInputType.number, 键盘右下角按键类型 textInputAc ...

  8. 【汇总】PHP 伪协议 利用

    日期:2019-07-28 21:24:36 更新: 作者:Bay0net 介绍: 0x01.基本信息 文件包含函数 include() require() include_once() requir ...

  9. nmon报告指标含义

    nmon分析文件详细指标详解指标类型指标名称指标含义SYS_SUMMCPU%cpu占有率变化情况:IO/secIO的变化情况:AAAAIXAIX版本号:buildbuild版本号:command执行命 ...

  10. github创建项目，并提交本地文件

    1.如图所示,不要点选"Initialize this repository with README",不然就看不到第二幅图的提示信息了 2.根据下面提示,初始化本地文件,然后上传