首先第一个，什么是BFC？

BFC的全称叫Block  Formatting  Context   （块级格式化上下文）BFC是css中隐含属性，开启BFC后元素会变成一个独立的布局环。

简单来说，它是一个独立渲染的区域，在这个区域的元素和外部的不相干，即使子元素怎么写怎么设置也不会超出父元素的内部，举个简单例子这个独立的区域相当于个房间，里面的人出不去外边的人进不来。

   

    使用方法（推荐）

overflow属性的auto / scroll / hidden这三个属性都可以让父元素生成一个BFC的渲染区域

开启BFC的特点(作用)

开启BFC的元素不会被浮动元素覆盖

开启BFC的子元素和父元素外边距不会再重叠（可以有效解决margin的父，子元素粘连问题）

BFC结界一旦形成，重新计算在父元素内部的浮动子元素所占高度（子元素浮动，解决父元素高度坍塌）

总结下对我对于CSS中BFC的认知的更多相关文章

  1. 理解CSS中BFC

    BFC(Block Formatting Context) 是Web页面中盒模型布局的CSS渲染模式.它的定位体系 属于 常规文档流 .摘自 W3C : 浮动,绝对定位元素, inline-block ...

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

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

  3. css中bfc和ifc

    bfc定义:块级格式化上下文,他是一个独立的渲染区域,他规定了这个内部如何布局,并且与这个区域的外部毫不相干.BFC布局规则: 内部的Box会在垂直方向,一个接一个地放置.Box垂直方向的距离由mar ...

  4. CSS中BFC规则

    何为BFC BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的B ...

  5. 浅析CSS中的BFC和IFC

    1. 为什么会有BFC和IFC 首先要先了解两个概念:Box和formatting context: Box:CSS渲染的时候是以Box作为渲染的基本单位.Box的类型由元素的类型和display属性 ...

  6. CSS中的IFC和BFC入门

    CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...

  7. 是的，是你的BFC - CSS中常用

    是的,是你的BFC - CSS中常用     是的,是你的BFC - CSS中常用 CFC 全称:(Block Formatting Contexts)含义是块级格式化上下文),就是一个块级元素的渲染 ...

  8. css中overflow:hidden的属性 可能会导致js下拉菜单无法显示

    css中overflow:hidden属性导致ExtJS中无法显示下拉滚动条 overflow属性: visible 默认.内容不会被修剪,会呈现在元素之外. hidden 内容会被修剪,但是浏览器不 ...

  9. CSS中的BFC

    CSS当中BFC介绍 在前端当中,我们都知道标准文档流,我们在开发的时候,经常会碰到block和inline.而下文要说到的BFC就是对块级盒子的格式化.当然block级别的盒子是BFC,那么inli ...

随机推荐

  1. zabbix 添加监控交换机温度item

    首先需要获取到交换机温度对应的OID,可以官方文档进行查询(多为私有OID),以盛科为例 官方文档查询到温度节点对于的OID为 10.0.3.102 1.3.6.1.4.1.27975.37.1.3. ...

  2. 抽象数据类型（ADT）

    抽象数据类型(Abstract Data Type,ADT)是指一个数学模型以及定义在这个模型上的一组操作.抽象数据类型的定义仅仅取决于它的一组逻辑特性,而与它在计算机中的表示和实现无关. 例如,in ...

  3. 类型安全的 Go HTTP 请求

    前言 对 Gopher 来说,虽然我们基本都是在写代码让别人来请求,但是有时候,我们也需要去请求第三方提供的 RESTful 接口,这个时候,我们才能感受到前端同学拼接 HTTP 请求参数的痛苦. 比 ...

  4. uniapp小程序webSocket封装使用

    目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小 ...

  5. 计算机环境变量的配置，以java为例以及eclipse简要设置

    安装JDK时可以不安装公共jre.因为好多软件和浏览器已经默认自带的jre了,或者自动调用系统的了. 在java 中需要设置三个环境变量(1.5之后不需要再设置CLASSPATH了,但需要的话可以设置 ...

  6. 判断语句、if嵌套

    判断语句 上一篇我们使用了一下if语句当然我们不止这些 我们上一个只是判断出如果满足条件会执行,那么我们想一想如果不能满足该会怎么样! 当然 还有一种语句叫做if else 他的语法格式是: if ( ...

  7. C语言学习之我见-memchr()内存查找字符函数

    memchr()内存查找字符函数:主要用于从内存中查找自己需要的字符位置. (1)函数原型: void *memchr(const void *_Buf ,int _Val,size_t _MaxCo ...

  8. TypeScript（4）接口

    介绍 TypeScript 的核心原则之一是对值所具有的结构进行类型检查.我们使用接口(Interfaces)来定义对象的类型.接口是对象的状态(属性)和行为(方法)的抽象(描述) 接口初探 声明接口 ...

  9. SpringBoot 集成缓存性能之王 Caffeine

    使用缓存的目的就是提高性能,今天码哥带大家实践运用 spring-boot-starter-cache 抽象的缓存组件去集成本地缓存性能之王 Caffeine. 大家需要注意的是:in-memeory ...

  10. Java实用类(五) -Math类和指定范围的随机数

    1.Math类 java.lang.Math类提供了常用的数学运算方法和两个静态常量E(自然对数的底数) 和PI(圆周率) // 绝对值 System.out.println(Math.abs(-3. ...