首页 > 其他分享 >什么是BFC

什么是BFC

时间:2024-09-05 15:50:08浏览次数:4  
标签:BFC Box 什么 元素 box margin Block

定义
BFC (Block formatting context) 直译为 "块级格式化上下文"。它是一个独立的渲染区域,只有 Block-level box 参与,它规定了内部的 Block-level Box 如何布局,并且与这个区域外部毫不相干。

布局规则

1、内部的 Box 会在垂直方向,一个接一个地放置

2、Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin会发生重叠

3、每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此

4、BFC 的区域不会与 float box 重叠

5、BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此

6、计算 BFC 的高度时,浮动元素也参与计算

 

哪些元素会生成 BFC

1、根元素
2、float 属性不为 none
3、position 为 absolute 或 fixed
4、display 为 inline-block, table-cell, table-caption, flex, inline-flex
5、overflow 不为 visible

标签:BFC,Box,什么,元素,box,margin,Block
From: https://www.cnblogs.com/EssMin/p/18398450

相关文章

  • Linux中cd命令的主要作用是什么?
    cd命令是Linux系统中用于改变当前工作目录的命令,其全称为changedirectory,这个命令在Unix、Linux和MacOS等操作系统中都非常常用,那么Linux常用命令cd如何使用?具体请看下文。cd命令用于在Linux文件系统中导航。它允许您更改当前工作目录,即执行命令时所处的位置。基本......
  • SQL语句什么时候用having?以及怎么使用limit
    因为where关键字无法与合计函数一起使用,例如sum(),avg()等,所以当有条件的话,需要放在having下。eg:我们希望查找订单总金额少于2000的客户。SELECTCustomer,SUM(OrderPrice)FROMOrdersGROUPBYCustomerHAVINGSUM(OrderPrice)<2000MySQL无法使用top子句,所以要获得表中的特定......
  • ELASTIC意外回归开源背后的原因是什么?
    随着Elastic改变Elasticsearch和Kibana的许可证,其转变似乎更像是一种商业策略,而不是拥抱公共资源。译自What'sBehindElastic'sUnexpectedReturntoOpenSource?,作者StevenJVaughan-Nichols。你说什么?在Elastic将Elasticsearch的开源Apache许可证改为半专有的S......
  • base64是什么,在 C# 中对 Base64 字符串进行编码和解码
    原文链接:https://blog.csdn.net/ty_oldman/article/details/116306785         https://blog.csdn.net/qq_55752792/article/details/139681358base64是什么Base64编码,是由64个字符组成编码集:26个大写字母AZ,26个小写字母az,10个数字0~9,符号“+”与符号“/”。Bas......
  • 可用性、可维护性、可靠性有什么区别?
    我们生活在一个可靠性的时代,用户依赖于对服务的一致访问。在相互竞争的服务之间进行选择时,对用户来说,没有比可靠性更重要的特性了。但是可靠性是什么意思呢?为了回答这个问题,我们将根据可靠性工程中的其他度量来分解可靠性:可用性和可维护性。区分这些术语并不是语义问题。了解这些......
  • 本来没有什么事情,删了服务器上一个文件夹,导致忙了快两个星期
    我不在的大半年,大数据服务基本没问题,只过来维护过一两次2024年大半年,大数据服务都比较稳定,我也只过来维护过一两次。8月份我又过来了,交接完离职同事的工作,本来没什么事情。StatHub页面服务状态不刷新StatHub是一个集群管理/应用编排/进程守护工具,可以用来高效的管理服务集群。......
  • 都说学【python】,那么python到底是什么呢?
    发展现如今,作为一个ICT从业者,如果你没听说过Python,那就太out了。python作为现在最热门的程序语言,拥有超高的人气,可以说是IT界的新一代明星。尤其Python和目前红得发紫的人工智能之间密切的关系,使得大家都对它投入了特别的关注。今天,小编就和大家聊一聊,到底什么是Python。......
  • String,StringBuffer,StringBuilder有什么区别?
    1.可变性:String类使用了final关键字字符数组保存字符串,所以String对象是不可变的,也就是我们说的常量。而StringBuffer和StringBuilder均继承了AbstractStringBuilder类,且它们的构造方法都是调用父类的构造方法。AbstractStringBuilder类中也使用了字符数组保存字符串,但是没有使用......
  • 数字化时代,为什么需要设计以用户体验为中心的企业架构框架
    在竞争激烈的市场环境中,用户体验(CustomerExperience,CX)已成为企业成功的关键因素。一个优质的用户体验不仅能够提升客户满意度,还能增强品牌忠诚度,推动业务增长。然而,打造卓越的用户体验并非易事,它需要企业在多个层面进行精细化的管理和优化。 本文将探讨企业架构如何通过优化流......
  • 不同的云桌面系统构架有什么相同点以及不同点?
     云桌面是一种基于云计算的桌面服务,支持云桌面的快速创建、部署和集中运维管理。以客户需求的视角看,行业数字化转型进入深水区,云桌面扮演的角色愈发重要。企业IT基础设施正向集约低碳转型,云桌面以其资源高效利用的优势,顺应此趋势。无需投入大量的硬件部署,云桌面可按需申请轻松使......