首先第一个，什么是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. 电脑UEFI启动是什么？

    UEFI 当EFI发展到1.1的时候,英特尔决定把EFI公之于众,于是后续的2.0吸引了众多公司加入,EFI也不再属于英特尔,而是属于了Unified EFI Form的国际组织,EFI在2.0后也遂 ...

  2. nacos 详细介绍(二)

    五.nacos的namespace和group namespace:相当于环境,开发环境 测试环境 生产环境 ,每个空间里面的配置是独立的默认的namespace是public, namespace可 ...

  3. scrapy架构与目录介绍、scrapy解析数据、配置相关、全站爬取cnblogs数据、存储数据、爬虫中间件、加代理、加header、集成selenium

    今日内容概要 scrapy架构和目录介绍 scrapy解析数据 setting中相关配置 全站爬取cnblgos文章 存储数据 爬虫中间件和下载中间件 加代理,加header,集成selenium 内 ...

  4. lnav-日志查看器

    lnav是一个基于控制台的高级lnav是一个基于控制台的高级日志文件查看器(浏览器). lnav支持日志高亮显示内容以及查看压缩的日志文件,而且它可以使用较小的内存实时查看较大的日志文件.日志文件查看 ...

  5. 【网站】windows phpstudy v8.1搭建https

    这两天在搭建微擎,使用了官方推荐的一键安装环境,在搭建完站点后,想开启https. 发现如下图所示,无论关闭网站,还是关闭nginx.都无法建立https.网上也找不到相关流程,后来试着关闭nginx ...

  6. ElasticSearch7.3学习(二十九)----聚合实战之使用Java api实现电视案例

    一.数据准备 创建索引及映射 建立价格.颜色.品牌.售卖日期字段 PUT /tvs PUT /tvs/_mapping { "properties": { "price& ...

  7. 解锁！玩转 HelloGitHub 的新姿势

    本文不会涉及太多技术细节和源码,请放心食用 大家好,我是 HelloGitHub 的老荀,好久不见啊! 我在完成 HelloZooKeeper 系列之后,就很少"露面了".但是我对 ...

  8. VSCode进一步深入了解学习

    紧接上一章节趁热打铁吧,未关注博主的记得关注哦! VSCode设置 (1)关闭预览模式 我们在 VScode 上打开一个新文件的话会覆盖掉以前的文件,这是因为 VSCode 默认开启了预览模式,预览模 ...

  9. 【C++ 字符串题目】 输入三个人名，按字母顺序排序输出

    题目来源:https://acm.ujn.edu.cn Problem A: [C++ 字符串] 输入三个人名,按字母顺序排序输出 Time Limit: 1 Sec  Memory Limit: 1 ...

  10. python常用标准库（压缩包模块zipfile和tarfile）

    常用的标准库 在我们常用的系统windows和Linux系统中有很多支持的压缩包格式,包括但不限于以下种类:rar.zip.tar,以下的标准库的作用就是用于压缩解压缩其中一些格式的压缩包. zip格 ...