首先第一个，什么是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. [总结] 零散的 tricks

    对于类似构造方案的题目,先确定其中一些关键位置的方案,然后看是否能较为简单地推出其他位置的方案. 一个长度为 \(n\) 的序列,满足 \[a_1\le-a_4\le a_7\le-a_{10}\le ...

  2. p2p-tunnel 打洞内网穿透系列（二）TCP转发访问内网共享文件夹

    系列文章 p2p-tunnel 打洞内网穿透系列(一)客户端配置及打洞 p2p-tunnel 打洞内网穿透系列(二)TCP转发访问远程共享文件夹 p2p-tunnel 打洞内网穿透系列(三)TCP转发 ...

  3. 一、深入学习c++先要练好的内功

    掌握进程虚拟地址空间区域的划分 课程讲的内容建立在x86 32位的Linux系统下. 任何的编程语言会产生两种东西:指令和数据.磁盘上的可执行文件在启动时都会加载到内存当中,但是不会加载到物理内存中, ...

  4. vmware ubuntu 看不到网卡或连接不到网络

    执行以下命令就可以重新请求 dhcp 服务器,一般就可以联网了, ens33 是网卡名称,根据自己的情况替换 sudo dhclient ens33 右上角网络图标消失 # 先停止服务 sudo se ...

  5. 最佳案例 | 游戏知几 AI 助手的云原生容器化之路

    作者 张路,运营开发专家工程师,现负责游戏知几 AI 助手后台架构设计和优化工作. 游戏知几 随着业务不断的拓展,游戏知几AI智能问答机器人业务已经覆盖了自研游戏.二方.海外的多款游戏.游戏知几研发团 ...

  6. 「ARC 139F」Many Xor Optimization Problems【线性做法，踩标】

    「ARC 139F」Many Xor Optimization Problems 对于一个长为 \(n\) 的序列 \(a\),我们记 \(f(a)\) 表示从 \(a\) 中选取若干数,可以得到的最 ...

  7. 存储器、I/O组织、微处理器

    重点知识 存储器的内部结构及访问方法 存储器分段以及存储器中的逻辑地址和物理地址 I/O端口组织及编址方式 时序和总线操作以及系统的工作方式和特点. 存储器组织 8086有20根地址线,可寻址的存储器 ...

  8. Cpp的赋值和变量说明

    一命名方式: 1.关键字不能作为变量名 int int;是错误的电脑会提示为非法取名 上面的示例是错误示范,而错误提示告诉了为什么错了记住这错误提示了: 2.的二个知识点: 变量名是分大小写的: in ...

  9. MVC - forward 和 redirect 的区别

    MVC - forward 和 redirect 的区别 forward是服务器请求资源,服务器直接访问目标地址的URL,把那个URL的响应内容读取过来,然后把这些内容再发给浏览器,浏览器根本不知道服 ...

  10. Java实现http大文件流读取并批量插入数据库

    1.概述 请求远程大文本,使用流的方式进行返回.需要设置http链接的超时时间 循环插入到List中,使用mybatis-plus批量插入到mysql中 2.需求 两台服务器 大文件放到其中一台服务器 ...