首先第一个，什么是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. 三月总结&四月计划

    三月总结 1. 主要任务 <C++设计模式>网课 ① 进展: 看完,对设计模式的整体设计思路和几个重要的设计模式重点学习了一下,目前对设计模式的认识还比较浅 ② 总结: 做完总结 ③ 反思 ...

  2. 图解Tire树+代码实现

    简介   Trie又称为前缀树或字典树,是一种有序树,它是一种专门用来处理串匹配的数据结构,用来解决一组字符中快速查找某个字符串的问题.Google搜索的关键字提示功能相信大家都不陌生,我们在输入框中 ...

  3. 论文解读（NGCF）《LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation》

    论文信息 论文标题:LightGCN: Simplifying and Powering Graph Convolution Network for Recommendation论文作者:Xiangn ...

  4. 不可不知的 MySQL 升级利器及 5.7 升级到 8.0 的注意事项

    数据库升级,是一项让人喜忧参半的工程.喜的是,通过升级,可以享受新版本带来的新特性及性能提升.忧的是,新版本可能与老的版本不兼容,不兼容主要体现在以下三方面: 语法不兼容. 语义不兼容.同一个SQL, ...

  5. spring-boot rest controller 使用枚举作为参数，重写反序列化实现任意值转枚举类型

    目录 BaseEnum MyEnum StringToEnumConverterFactory FormatterConfig DTO RestController 参考 BaseEnum packa ...

  6. strlen获取字符数组为什么是255

    为什么是255呢? strlen函数的规则是,读取到0则判断字符串结束. char为1字节,只有8位. 所以...... -1就是 1111 1111, -2就是 1111 1110, 直到-128: ...

  7. Prometheus普罗米修斯快速入门

    欢迎来到普罗米修斯! Prometheus是一个监控平台,通过从监控目标的抓取HTTP端点上获取指标. 本指南将展示如何使用和安装Promethues,配置和监视第一个资源.还将下载并安装导出器Exp ...

  8. 协议层安全相关《http请求走私与CTF利用》

    0x00 前言 最近刷题的时候多次遇到HTTP请求走私相关的题目,但之前都没怎么接触到相关的知识点,只是在GKCTF2021--hackme中使用到了 CVE-2019-20372(Nginx< ...

  9. MongoDB 常用启动参数

    每日一句 Once you choose your way of life, be brave to stick it out and never return. 生活的道路一旦选定,就要勇敢地走到底 ...

  10. 牛客多校赛2K Keyboard Free

    Description 给定 \(3\) 个同心圆,半径分别为 \(r1,r2,r3\) ,三个点分别随机分布在三个圆上,求这个三角形期望下的面积. Solution 首先可以固定 \(A\) 点,枚 ...