首先第一个，什么是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. 团队Beta4

    队名:观光队 链接 组长博客 作业博客 组员实践情况 王耀鑫 **过去两天完成了哪些任务 ** 文字/口头描述 学习 展示GitHub当日代码/文档签入记录 无 接下来的计划 完成短租车,页面美化 * ...

  2. Docker容器的安装和使用

    Docker容器的安装和使用 安装: curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 或国内:curl -sSL ...

  3. Golang 函数 方法 接口的简单介绍

    函数 函数是基本的代码块,通常我们会将一个功能封装成一个函数,方便我们调用,同时避免代码臃肿复杂. 函数的基本格式 func TestFunc(a int, b string) (int, strin ...

  4. 对象、Map、Set、WeakMap、WeakSet

    对象.Map.Set.WeakMap.WeakSet 本文写于 2020 年 11 月 24 日 总的来说,Set 和 Map 主要的应用场景分别在于数据重组和数据储存.Set 是一种叫做「集合」的数 ...

  5. 130_传析阅管理系统accdb64位版本

    博客:www.jiaopengzi.com 焦棚子的文章目录 请点击下载附件 几年前笔者针对家居门店的进销存.人员管理.工资管理.任务系统.门店经营盈亏管理.销售分析.考勤请假等息息相关的业务基于Ac ...

  6. form表单与css选择器

    目录 form表单 action属性 input标签 lable标签 select标签 textarea标签 补充 网络请求方式 CSS简介 CSS基本选择器 组合选择器 属性选择器 分组与嵌套 伪类 ...

  7. 一文带你搞懂 SSR

    欲语还休,欲语还休,却道天凉好个秋 ---- <丑奴儿·书博山道中壁>辛弃疾 什么是 SSR ShadowsocksR?阴阳师?FGO? Server-side rendering (SS ...

  8. PyTorch DataSet Normalization torchvision.transforms.Normalize()

         特征缩放, 在这种情况下,我们不仅仅考虑是一个值的数据集,我们考虑的是具有多个特征和相关的值的样本或元素的数据集. 假如正在处理一个人的数据集,           归一化数据集有许多不同的 ...

  9. 物联网lora无线数传模块应用案例：LoRawan网关通信技术

    什么是LoRa LoRa(Long Range) 无线通信技术是 Semtech 在2012年开发出来的一款适合物联网使用的射频IC.其设计理念为低功耗.长距离.低成本.网路简单.易于扩展的无线数传技 ...

  10. Camunda如何适配国产数据库达梦

    前言 camunda流程引擎官方支持的数据库有:MySQL .MariaDB .Oracle .DB2 .PostgreSQL .SQL Server.H2.对于其他类型的数据库如何支持,尤其是国产数 ...