一、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. springBoot 整合 mybatis 项目实战

    二.springBoot 整合 mybatis 项目实战   前言 上一篇文章开始了我们的springboot序篇,我们配置了mysql数据库,但是我们sql语句直接写在controller中并且使用 ...

  2. JSTL标签语言

    ******概述: JSTL是apache对EL表达式的扩展(也就是说JSTL依赖EL),JSTL是标签语言! JSTL标签使用以来非常方便,它与JSP动作标签一定,只不过它不是JSP内置的标签,需要 ...

  3. java学期总结

    第一周https://www.cnblogs.com/sqhe2000/p/11482760.html. 第二周https://www.cnblogs.com/sqhe2000/p/11521023. ...

  4. 191121CSS

    一.CSS 1.css选择器 css选择器的使用方法 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. SpringBoot整合kafka(安装)

    项目路径:https://github.com/zhaopeng01/springboot-study/tree/master/study_14 序言 Kafka 是一种高吞吐的分布式发布订阅消息系统 ...

  6. 使用asio进行异步下载http

    下面是官方demo, 给人耳目一新的感觉,以前是总是把c++当成有类功能的C,看完这个感觉不用自己造轮子了,还是要跟上时代的步伐 // // async_client.cpp // ~~~~~~~~~ ...

  7. emqttd学习教程（二）：emqttd配置说明

    一.配置文件说明emqttd消息服务器通过 etc/ 目录下配置文件进行设置,主要配置文件包括: 配置文件 说明 etc/emq.conf 消息服务器配置文件etc/acl.conf 默认ACL规则配 ...

  8. flutter GestureDetector点击区域

    使用GestureDetector包裹Container,发现在Container内容为空的区域点击时,捕捉不到onTap点击事件. 解决方案:在GestureDetector里面添加属性: beha ...

  9. Python学习笔记：（十二）输入输出

    一.格式化输出 1.str.format()函数,格式化输出值 2.将输出值转变为字符串,可以使用repr()和str() str()函数将返回一个易读的表达式形式: repr()返回一个解释器易读的 ...

  10. ubuntu 常用命令及一些问题collection

    转载请包含http://www.cnblogs.com/lqruui/p/5306941.html 一.安装卸载删除 1.手动 install.卸载.删除 1.首先tar -zxvf +压缩包名解压压 ...