【CSS】深入理解:BFC究竟是什么?

深入理解:BFC究竟是什么?

在我们了解BFC之前,我们先来看看什么是FC

1. FC的概念

FC全称 Formatting Context ,元素在标准流里面都属于一个FC

  • 块级元素的布局都属于Block Formatting Context,也就是BFC
    • block level box都是在BFC中布局的
  • 行内级元素的布局都属于Inline Formatting Context,IFC

2. BFC - Block Formatting Context

2.1 什么是BFC呢?怎么创造BFC?

常见的形成BFC的场景

  • 根元素(html,:root)
  • 浮动元素(float属性部位none)
  • 绝对定位元素(absolute或fixed)
  • 行内快元素(display为inline-block)
  • 表格单元格(元素的display为table-cell(默认))
  • 表格标题(display为table-caption)
  • 匿名表格单元格格式(元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、 row、tbody、thead、tfoot 的默认属性)或 inline-table)
  • overflow属性值不是“visible”的元素
  • 弹性元素(flex布局)
  • 网格元素(gird布局)

2.2 BFC的作用

  1. 在BFC中,box会垂直方向上一个挨着一个排布
  2. 垂直方向的属性由magin决定
  3. 同一个BFC中,两个相邻的box上下之间的margin会折叠(规定)
  4. BFC中,每个元素的左侧边缘都是紧挨着包含块的左边缘

这就是浏览器如何排布我们的元素

2.3 利用BFC解决块级元素的margin上下折叠问题

.box {width: 100px;height: 100px;
}
.box1 {background-color: pink;margin-bottom: 50px;
}
.box2 {margin-top: 30px;background-color: purple;
}
<div class="box box1"></div>
<div class="box box2"></div>

在上述的代码中,box1和box2在同一个BFC中,(根元素html)会创建一个BFC,所以会折叠,两个box之间的距离为50px,我们可以利用BFC来解决这个问题

<div class="container"><div class="box box1"></div>
</div>
<div class="box box2"></div>

用一个div盒子来包裹box1

.container {overflow: auto;
}

当我们给box1的父盒子container设置overfolw的属性为auto时,此时container会开启一个BFC,此时,box1和box2并不是属于同一个BFC,所以不会出现margin上下折叠的问题

2.4 为什么BFC会解决浮动元素高度塌陷的问题呢?

网上有很多的说法,BFC可以解决浮动元素的塌陷问题,实现清除浮动的效果,那么请看这个案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>ul,li {padding: 0;margin: 0;list-style: none;}.box ul {width: 330px;height: 150px;background-color: orange;overflow: hidden;}.box li {float: left;width: 100px;height: 100px;margin: 0 10px 10px 0;background-color: pink;}</style></head><body><div class="box"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul></div></body>
</html>

在这里插入图片描述

在这个案例中,我们给了ul 一个固定高度,也给ul设置了一个BFC,但并没有清除浮动

事实上,BFC解决高度塌陷的需要满足两个条件

  • 浮动元素的父元素开启BFC
  • 浮动元素的父元素高度是auto

当BFC的高度为auto时,将会计算父元素的高度(权威)

  1. 如果盒子中的子元素只有行内元素,直接计算顶部到底部的距离
  2. 如果有块级元素,计算块级元素的高度
  3. 如果有绝对定位元素,直接忽略其高度
  4. 如果有浮动元素,则会增加高度来包含这些浮动元素的下边缘

也就是我们可以得出一个重要结论,当元素开启新的BFC时,会主动将浮动元素给包括进去,并不是浮动元素向父元素汇报高度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/1165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用AQS(AbstractQueuedSynchronizer)实现一个线程同步器

目录 1. 前言 2. 什么是同步器 3. 同步器实现思路 Semaphore(信号量) 4. 代码实现 4.1. 创建互斥锁类 4.2 编写静态内部类&#xff0c;继承AQS 4.3 内部类实现AQS钩子函数 4.3 封装lock&#xff0c;unlock方法 4.4. 测试 5. 总结 本文章源码仓库&#xff1a;Conc…

SpringBoot解决跨域问题,什么是跨域问题

目录 什么是跨域 配置文件解决跨域问题 注解解决跨域问题 拦截器解决跨域问题 过滤器实现 使用ResponseBodyAdvice 什么是跨域 协议://域名:端口 一个不一样就是跨域 在浏览器的同源策略中&#xff0c;如果两个网页的协议&#xff08;例如&#xff0c;http 或 https&…

【算法刷题 | 回溯思想 06】4.17(子集、子集||)

文章目录 9.子集9.1题目9.2解法&#xff1a;回溯9.2.1回溯思路&#xff08;1&#xff09;函数返回值以及参数&#xff08;2&#xff09;终止条件&#xff08;3&#xff09;遍历过程 9.2.2代码实现 10.子集 ||10.1题目10.2解法&#xff1a;回溯10.2.1回溯思路10.2.2代码实现 9.子…

(2022级)成都工业学院数据库原理及应用实验五: SQL复杂查询

写在前面 1、基于2022级软件工程/计算机科学与技术实验指导书 2、成品仅提供参考 3、如果成品不满足你的要求&#xff0c;请寻求其他的途径 运行环境 window11家庭版 Navicat Premium 16 Mysql 8.0.36 实验要求 在实验三的基础上完成下列查询&#xff1a; 1、查询医生…

C++ 抽象

关键字&#xff1a;virtual 在C中可以使用关键字 virtual将函数声明为抽象函数&#xff0c;从而对类进行抽象&#xff1b;至少有一个成员函数为抽象函数的类将被视为抽象类。抽象类无法进行实例化&#xff0c;因而抽象类在C中一般是为了给其他类提供一个可以继承的适当的基类作…

DSSAT作物模型建模方法与进阶基于Python语言快速批量运行DSSAT模型及交叉融合、扩展应用技术应用

随着数字农业和智慧农业的发展&#xff0c;基于过程的作物生长模型&#xff08;Process-based Crop Growth Simulation Model&#xff09;在模拟作物对气候变化的响应与适应、农田管理优化、作物品种和株型筛选、农业碳中和、农田固碳减排等领域扮演着越来越重要的作用。Decisi…

React Flow浏览器默认事件失效问题解决

前情提要 React Flow可以使用滑轮来实现对于该部分区域的放大和缩小&#xff0c;并且自动拦截浏览器默认的滑轮和滑轮按键组合事件&#xff0c;如&#xff1a;Ctrl鼠标滑轮事件。那么这就导致在非该区域的地方使用了浏览器默认的滑轮事件且改变了原有页面的大小时&#xff0c;…

libftdi1学习笔记 8 - MPSSE SPI优化速度

之前用GPIO模拟SPI速度有点慢&#xff0c;加上直接发送字节的方式实现SPI。 1. IO的定义 如果不使用模拟的方式&#xff0c;则SCK&#xff0c;MOSI&#xff0c;MISO必须固定。通过这3个IO判断是哪种模式 if(spi[port].sck ! 0 || spi[port].mosi_io0 ! 1 || spi[port].miso_…

basic_string_view解析

src\rttr\string_view.h 对github项目rttr&#xff08;C反射库&#xff09;解析&#xff0c;链接&#xff1a;https://github.com/rttrorg/rttr template<typename CharT, typename Traits std::char_traits > class basic_string_view 私有成员变量 const value_ty…

安卓官方例程

https://learn.microsoft.com/zh-cn/shows/connecton-demand/202?sourcerecommendations https://learn.microsoft.com/zh-cn/visualstudio/cross-platform/cross-platform-mobile-development-in-visual-studio?viewvs-2022 https://learn.microsoft.com/zh-cn/shows/xamari…

pta L1-063 吃鱼还是吃肉

L1-063 吃鱼还是吃肉 分数 10 全屏浏览 切换布局 作者 陈越 单位 浙江大学 国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤&#xff1b;8 岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。 现在你要根据小宝宝的身高体重&#xff0c;给出补充营养的…

Abstract Factory抽象工厂模式详解

模式定义 提供一个创建一系列相关或互相依赖对象的接口&#xff0c;而无需指定它们具体的类。 代码示例 public class AbstractFactoryTest {public static void main(String[] args) {IDatabaseUtils iDatabaseUtils new OracleDataBaseUtils();IConnection connection …

前端页面助手 (vue)

快速开发页面&#xff08;图形化开发页面&#xff09; 自主编辑 然后自己也可以修改属性 最后导出页面即可 github地址 ;https://github.com/opentiny/tiny-engine

图灵奖简介及2023年获奖者Avi Wigderson的贡献

No.内容链接1Openlayers 【入门教程】 - 【源代码示例300】 2Leaflet 【入门教程】 - 【源代码图文示例 150】 3Cesium 【入门教程】 - 【源代码图文示例200】 4MapboxGL【入门教程】 - 【源代码图文示例150】 5前端就业宝典 【面试题详细答案 1000】 文章目录 2023年的…

9月BTE第8届广州国际生物技术大会暨展览会,全媒体聚焦下的高精尖行业盛会

政策春风助力&#xff0c;共迎大湾区生物医药行业50亿红利 今年3月“创新药”首次写入国务院政府工作报告之后&#xff0c;广州、珠海、北京多地政府纷纷同步出台了多项细化政策&#xff0c;广州最高支持额度高达50亿元&#xff0c;全链条为生物医药产业提供资金支持&#xff…

service-mesh

01 架构的发展历史 1.1单机小型时代 1.2 垂直坼分 1.3 集群化负载均衡架构 用户量越来越大&#xff0c;就意味着需要更多的小型机&#xff0c;但是小型机价格昂贵&#xff0c;操作维护成本高。 此时更优的选择是采用多个 pc 机部署同一个应用的方案&#xff0c;但是此时就需…

P1039 [NOIP2003 提高组] 侦探推理

注意换行符&#xff01;&#xff01;&#xff01; 如果你使用getchar()系列函数读入&#xff0c;并且用换行符判定是否结束&#xff0c;则换行符会导致你WA掉&#xff01; linux下换行符为’\n’&#xff0c;windows下换行符为’\r\n’&#xff0c;如果数据是windows下造的&a…

单片机小项目——直流电机+按键

利用普中单片机的代码实现在按下第k个独立按键时&#xff0c;直流电机运作k秒 #include "reg52.h"typedef unsigned int u16; //对系统默认数据类型进行重定义 typedef unsigned char u8; sbit DC_MotorP1^0; //定义独立按键控制脚 sbit KEY1P3^1; sbit KEY2P3^0; sb…

代码学习记录45---单调栈

随想录日记part45 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.04.17 主要内容&#xff1a;今天开始要学习单调栈的相关知识了&#xff0c;今天的内容主要涉及&#xff1a;每日温度 &#xff1b;下一个更大元素 I 739. 每日温度 496.下一个更大元素 I Topic…

【力扣】55. 跳跃游戏 - 力扣(LeetCode)

Problem: 55. 跳跃游戏 记录自己解答的思路和代码 文章目录 问题思路复杂度Code 问题 思路 这个题的主要思路就是先找到0对应的位置&#xff0c;然后标记起来对应left&#xff0c;如果只有一个零&#xff0c;只需要left后面的数中有>1的数就能跳过去&#xff0c;如果是00&a…