当前位置： 首页 > news >正文

CSS BFC特性和应用

news 文章来源：https://blog.csdn.net/qq_40147756/article/details/134753374 2024/11/16 10:15:13

目录

  • 1，介绍
  • 2，BFC布局规则
  • 3，创建BFC
  • 4，BFC应用
    • 1，浮动子元素使父级高度坍塌
    • 2，非浮动元素被浮动元素覆盖
    • 3，margin 合并
      • 1，父子 margin 合并：父级和第1个/最后1个子元素
      • 2，相邻兄弟元素的 margin 合并

1，介绍

BFC 就是页面上一块独立的容器，内部有自己的渲染布局规则。容器内外的元素不会相互影响。

2，BFC布局规则

  1. 内部的元素，在垂直方向上会依次放置。
  2. 元素在垂直方向上的距离由 margin 决定，同一个 BFC 的两个相邻元素的 margin 会重叠。
  3. BFC 区域不会和外部浮动元素重叠。
  4. 计算 BFC 高度时，浮动子元素也参与运算。

在标准流中的根元素 html 就是一个天然的 BFC 环境。

3，创建BFC

简单介绍下最常用的，更多的创建方式参考MDN-BFC。

属性属性值
float不为 none
positionabsolute 或 fixed
displayinline-block、flow-root、flex、grid、 table 等
overflow不为 visible 或 clip 的块级元素

无论哪种方式创建的BFC，都有一定的副作用。

只有 display: flow-root 是无副作用的，它的行为如同 root（在浏览器中是 html ）元素。

4，BFC应用

1，浮动子元素使父级高度坍塌

<style>.container {border: 2px solid black;}.item {float: left;width: 50px;height: 50px;background-color: salmon;}
</style><body><div class="container"><div class="item"></div></div>
</body>

表现：

在这里插入图片描述
解决：只需要将父元素设置为 BFC 即可。

.container {display: flow-root;
}

在这里插入图片描述

2，非浮动元素被浮动元素覆盖

对于浮动元素的特性来说，这是正常现象。

<style>.box1 {float: left;width: 100px;height: 100px;background-color: rgba(255, 255, 255, 0.75);border: 1px solid black;}.box2 {border: 2px solid red;}
</style><body><div class="box1"></div><div class="box2">求关注，下雪天的夏风</div>
</body>

表现：

在这里插入图片描述

但我们不想让非浮动元素 box2 被覆盖，所以可设置 box2 为 BFC 来解决。

.box2 {display: flow-root;
}

在这里插入图片描述

上面这种就是经典的两列布局实现方式之一。

3，margin 合并

MDN参考

margin 合并的3种情况，BFC可以解决前2种

  1. 父子 margin 合并：父级和第1个/最后1个子元素
  2. 相邻兄弟元素的 margin 合并
  3. 空块级元素的 margin 合并

1，父子 margin 合并：父级和第1个/最后1个子元素

<style>.container {background-color: skyblue;}.item {margin-top: 50px;width: 50px;height: 50px;background-color: salmon;}
</style><div>求关注，下雪天的夏风</div>
<div class="container"><div class="item"></div>
</div>

表现：父级“掉”下来了：

在这里插入图片描述

解决方式之一，就是将父级设置为 BFC。

.container {display: flow-root;
}

在这里插入图片描述

2，相邻兄弟元素的 margin 合并

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

表现，margin 并没有相加，而是合并取最大值：

在这里插入图片描述

解决：给其中一个元素增加父级，这样就回到了第1种情况。

<style>.container {display: flow-root;}
</style><div class="box box1"></div>
<div class="container"><div class="box box2"></div>
</div>

在这里插入图片描述

这里也说明第一种父子 margin 合并还有哪些解决办法（bottom 合并同理）：

  1. 父元素设置 border-top
  2. 父元素设置 padding-top
  3. 父元素和第一个子元素之间添加内联元素进行间隔。

以上。

相关文章：

CSS BFC特性和应用

目录 1&#xff0c;介绍2&#xff0c;BFC布局规则3&#xff0c;创建BFC4&#xff0c;BFC应用1&#xff0c;浮动子元素使父级高度坍塌2&#xff0c;非浮动元素被浮动元素覆盖3&#xff0c;margin 合并1&#xff0c;父子 margin 合并&#xff1a;父级和第1个/最后1个子元素2&…...

编程日记 2023/12/6 14:03:29

软件工程 - 第8章 面向对象建模 - 3 - 动态建模

状态图 状态是指在对象生命周期中满足某些条件、执行某些活动或等待某些事件的一个条件和状况 。 案例一&#xff1a;描述烧水器在工作时的详细行为细节 “人就是一个类&#xff0c;而你”、我”、张三”等都是“人这个类的一个实例&#xff0c;站着”、“躺着等都是对象的一…...

编程日记 2023/12/6 14:02:28

Stable Diffusion AI绘画系列【16】:霸气侧漏的二次元武侠风

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…...

编程日记 2023/12/6 14:00:26

第二证券：苹果市值重返3万亿美元，关键因素并非人工智能

当地时间12月5日&#xff0c;到美股收盘&#xff0c;苹果公司股价收涨2.1%&#xff0c;报193.42美元&#xff0c;收盘市值重返3万亿美元上方。 上一年12月&#xff0c;苹果公司市值曾在盘中时间短触及3万亿门槛&#xff0c;但收盘并未站稳&#xff0c;本年6月收盘时正式打破3万…...

编程日记 2023/12/6 13:59:23

西南科技大学C++程序设计实验六（ 继承与派生一）

一、实验目的 1. 理解不同继承属性对派生类访问基类成员的区别 2. 掌握单继承程序编写 二、实验任务 1、调试下列程序，并在对程序进行修改后再调试，指出调试中的出错原因（该题中A为基类，B为派生类，B以public方式继承A） 重点：理解不同继承方式数据的访问权限，派生类…...

编程日记 2023/12/6 13:57:20

MySQL 性能优化

未完待续... 1. 分库、分表结构优化 1.1 数据库设计 不规范的数据库设计存在数据冗余以及插入、更新、删除异常问题。 规范化&#xff08;Normalization&#xff09;是数据库设计的一系列原理和技术&#xff0c;主要用于减少表中数据的冗余&#xff0c;增加完整性和一致性&…...

编程日记 2023/12/6 13:56:20

求职招聘小程序源码系统 全开源源代码：找工作+招人才 平台级别运营版 附带完整的搭建教程

在当前的求职招聘市场中&#xff0c;尽管存在大量的求职者和招聘者&#xff0c;但依然存在着信息不对称、沟通不畅等问题。小编来给大家分享一款求职招聘小程序源码系统&#xff0c;旨在提供一个高效、便捷、安全的求职招聘平台。 以下是部分代码示例&#xff1a; 系统特色功能…...

编程日记 2023/12/6 13:54:18

26、卷积 - 实际上是一个特征提取器

矩阵乘法的本质是特征的融合&#xff0c;卷积算法的本质是特征的提取。 回想一下之前所有介绍卷积的时候&#xff0c;描述了一种卷积运算的场景&#xff0c;那就是一个窗口在图片上滑动&#xff0c;窗口中的数值是卷积核的参数&#xff0c;也就是权值。 卷积的计算本质是乘累…...

编程日记 2023/12/6 13:53:17

web前端之vue3

MENU vue3响应式数据的判断、isRef、isReactive、isReadonly、isProxy、ref、reactive、readonlyvue3的生命周期vue3手写isRef、isReactive、isReadonly、isProxyvue3手写ref、深的refvue3手写shallowRef、浅的refvue3customRefvue3readonly与shallowReadonlyvue3toRaw与markRa…...

编程日记 2023/12/6 13:51:15

原来在C++的类中声明函数时可以不写参数名只写参数类型

2023年12月6日&#xff0c;周三上午 今天才发现原来可以这样写 在C的类中声明函数时可以不写参数名只写参数类型&#xff0c; 但是&#xff0c;在实现时必须写出参数名。 #include<iostream>class People { public:void move(int);void say(std::string);void doSomet…...

编程日记 2023/12/6 13:48:13

独孤思维：这里有蓝海项目，你要吗？

很多人&#xff0c;一看到蓝海项目&#xff0c;就趋之若鹜。 觉得红海项目太卷了&#xff0c;根本赚不到钱。 凡是认为蓝海项目不卷&#xff0c;可以做起来&#xff0c;做的轻松的&#xff0c;都是弱智和无能的表现。 你所能接触到的蓝海&#xff0c;根本就不是蓝海。 能够…...

编程日记 2023/12/6 13:47:12

外卖平台推荐算法的优化与实践

目录 引言 一、推荐算法的原理 二、推荐算法的挑战 三、实际案例分析 四、优化推荐算法的策略 五、结论 引言 在当今数字化社会&#xff0c;外卖平台成为了人们生活中不可或缺的一部分。为了提供更加个性化、高效的服务&#xff0c;外卖平台使用推荐算法成为了一项关键技…...

编程日记 2023/12/6 13:46:10

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION

CONTROLLING VISION-LANGUAGE MODELS FOR MULTI-TASK IMAGE RESTORATION (Paper reading) Ziwei Luo, Uppsala University, ICLR under review(6663), Cited:None, Stars: 350, Code, Paper. 1. 前言 像CLIP这样的视觉语言模型已经显示出对零样本或无标签预测的各种下游任务…...

编程日记 2023/12/6 13:44:08

HarmonyOS应用开发——页面

我们将对于多页面以及更多有趣的功能展开叙述&#xff0c;这次我们对于 HarmonyOS 的很多有趣常用组件并引出一些其他概念以及解决方案、页面跳转传值、生命周期、启动模式&#xff08;UiAbility&#xff09;&#xff0c;样式的书写、状态管理以及动画等方面进行探讨 页面之间…...

编程日记 2023/12/6 13:43:07

Java流Stream使用详解（练习）

练习 第一题 数据过滤 定义一个集合&#xff0c;并添加一些整数1,2,3,4,5,6,7,8,9,10过滤奇数&#xff0c;只留下偶数&#xff0c;并将结果保存起来 import java.util.ArrayList; import java.util.Collections; import java.util.List; import java.util.stream.Collectors…...

编程日记 2023/12/6 13:41:06

请介绍一下MySQL的存储引擎及其特点

问题&#xff1a;请介绍一下MySQL的存储引擎及其特点。 回答&#xff1a; MySQL是一个开源的关系型数据库管理系统&#xff0c;它支持多种存储引擎&#xff0c;每个存储引擎都有其自身的特点和适用场景。下面是对MySQL常见存储引擎的简要介绍&#xff1a; InnoDB&#xff1a; …...

编程日记 2023/12/6 13:39:04

Python---魔术方法

1、什么是魔术方法 在Python中&#xff0c;__xxx__()的函数叫做魔法方法&#xff0c;指的是具有特殊功能的函数。 2、__init__()方法(初始化方法或构造方法) 思考&#xff1a;人的姓名、年龄等信息都是与生俱来的属性&#xff0c;可不可以在生产过程中就赋予这些属性呢&…...

编程日记 2023/12/6 13:38:03

手把手教你注册意大利商标

在当今全球商业环境中&#xff0c;拥有一个独特的商标可以为企业在市场竞争中提供重要优势。商标作为品牌形象的核心&#xff0c;有助于吸引潜在客户&#xff0c;提升品牌价值&#xff0c;增加客户忠诚度。在意大利&#xff0c;商标注册同样具有重要意义&#xff0c;它能为企业…...

编程日记 2023/12/6 13:35:00

pandas详细笔记

一&#xff1a;什么是Pandas from matplotlib import pyplot import numpy as np import pandas as pdarange np.arange(1, 10, 2) series pd.Series(arange,indexlist("ABCDE")) print(series)二&#xff1a;索引 三&#xff1a;切片 位置索引切片&#xff08;左闭…...

编程日记 2023/12/6 13:34:00

win11安装（未完待续）

学习补丁 test.bat 运行后需要重启 slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms kms.03k.org slmgr /ato 文件扩展名 主题 性能设置 开始按钮靠左 任务栏对齐方式-靠左 必备软件 f.lux redshift 360管家 驱动精灵 edge c*lash&#xff08;v2*ray不支持w…...

编程日记 2023/12/6 13:32:58

python之记录程序运行时长工具

python之记录程序运行时长工具 废话不多话&#xff0c;上代码 from datetime import datetime, timedelta import timestart_time datetime.now()while True:current_time datetime.now()elapsed_time current_time - start_timeformatted_time str(elapsed_time).split(…...

编程日记 2023/12/6 13:31:58

.Net core 6.0 升8.0

1 Update Visual Studio 2 3 用Nutget 更新不同套件版本 更新后结果如下&#xff1a;...

编程日记 2023/12/6 13:30:56

MacDroid Pro for Mac – 安卓设备文件传输助手，实现无缝连接与传输！

想要在Mac电脑上轻松管理和传输您的安卓设备文件吗&#xff1f;MacDroid Pro for Mac 是您的最佳选择&#xff01;这款强大的文件传输助手可以让您在Mac上与安卓设备之间实现快速、方便的文件传输。 MacDroid Pro for Mac 提供了简单易用的界面&#xff0c;让您能够直接在Mac上…...

编程日记 2023/12/6 13:29:55

【EtherCAT详解】基于Wireshark的EtherCAT帧结构解析

写在前面 EtherCAT的报文比较繁琐，且一些参考书籍错误较多，且晦涩难懂，对于初学者，很难快速的入门。本文适用于有一定基础的研究者，如对报文有一些研究、对canopen协议有一定了解、并且对TwinCAT有了解的研究者。当然，对于初学者来说，也是很好的引导，少走很多弯路。本…...

编程日记 2023/12/6 13:28:54

C语言之程序的组成和元素格式

目录 关键字 运算符 标识符 姓名和标识符 分隔符 常量和字符串常量 自由的书写格式 书写限制 连接相邻的字符串常量 缩进 本节我们来学习程序的各组成元素&#xff08;关键字、运算符等&#xff09;和格式相关的内容。 关键字 在C语言中&#xff0c;相if和else这样的标识…...

编程日记 2023/12/6 13:25:51

HalconDotNet.HTupleAccessException:Index out of range

原因可能是没有生成hv_Qx的值&#xff0c;我这里是没有生成该值的区域。...

编程日记 2023/12/6 13:24:50

Delphi-线程

碰到身份证阅读器项目&#xff0c;直接放进trimmer里面读卡&#xff0c;导致主页面卡顿&#xff0c;就打算放进子线程里试一下&#xff0c;就有了这个尝试。 1.创建线程文件 直接点击左上角file新建other&#xff0c;delphi有自带的模版 这个勾选了&#xff0c;就是他会给你…...

编程日记 2023/12/6 13:22:48

WeakMap

WeakMap简介 作为es6一种新的数据结构&#xff0c;他是一种键值对的集合。与Map最大的区别有两个 1. 是其中的键必须是对象或非全局注册的符号。 全局注册的符号 const s1 Symbol.for(mySymbol) 非全局注册的符号 const s1 Symbol(mySymbol)了解Symbol.for 2. 不会创建对它…...

编程日记 2023/12/6 13:21:47

获取网络ppt资源

背景&#xff1a; ​ 某度上有很多优质的PPT资源和文档资源&#xff0c;但是大多数需要付费才能获取。对于一些经济有限的用户来说&#xff0c;这无疑是个遗憾&#xff0c;因为我们更倾向于以免费的方式获取所需资源。 解决方案&#xff1a; ​ 然而&#xff0c;幸运的是&am…...

编程日记 2023/12/6 13:18:44

从0到1构建智能分布式大数据爬虫系统

文章目录 1. 写在前面2. 数据获取挑战3. 基础架构4. 爬取管理5. 数据采集6. 增量与去重设计 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐…...

编程日记 2023/12/6 13:16:43

怎样自创网站/哪个搜索引擎最好用

innerText&#xff0c;outerText&#xff0c;innerHTML&#xff0c;outerHTML 这次我们要使用另一些对象属性对来实现动态改变文本&#xff0c;它们就是&#xff1a;innerText&#xff0c;outerText&#xff0c;innerHTML&#xff0c;outerHTML&#xff0c;千万要注意它们的大…...

编程日记 2024/11/16 9:09:21

宿迁做网站优化/网站构建的基本流程

本节书摘来自异步社区《JavaScript入门经典&#xff08;第6版&#xff09;》一书中的第2章&#xff0c;第2.8节&#xff0c;作者&#xff1a; 【美】 Phil Ballard 译者&#xff1a;李 军陈冀康&#xff0c;更多章节内容可以访问云栖社区“异步社区”公众号查看。 2.8　作业 请…...

编程日记 2024/11/16 6:50:55

青海wap网站建设哪家好/百度推广图片尺寸要求

在詹姆斯的正代签名战靴中&#xff0c;有不少人气不错的经典配色&#xff0c;首次诞生于 LeBron 4 的 “Graffiti” 涂鸦配色就是其中之一。除了 4 代之外&#xff0c;LeBron 11 和 LeBron 15 都曾带来 “Graffiti” 涂鸦配色&#xff0c;近日 Instagram 知名球鞋爆料账号 zsne…...

编程日记 2024/11/16 5:22:10

赚钱网站大全/公司网站优化

1.初始化"打字创建"属性代码类似于这样:var typing {_el: document.getElementById("demo"),_maxSpeed: 150,//最大输入速度_minSpeed: 20,//最小输入速度_textList: ["js实现简单的循环打字效果(思路分享)","关爱单身狗成长协会 ",&…...

编程日记 2024/11/16 5:00:50

微信小程序网站模板/厦门百度seo

对于ASP.NET pages的请求需要有HTTP handler来处理&#xff0c;比如Page的instance。当有一个request来请求某个.aspx页面时&#xff0c;ASP.NET runtime会从ASP.NET thread pool中选一个thread来处理这个request, 并且在这个请求处理完成时释放这个thread。因此&#xff0c;如…...

编程日记 2024/11/15 22:27:00

免费商标图案设计logo/百度seo公司哪家强一点

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼解N元一次方程从文件读入整数 N, 然后读入N*( N1)矩阵&#xff0c;得到解并输出到文件中。int main(){int ch;printf("\n");printf(" Gaussian Matrix Cal \n");printf("\n");printf("Choose:…...

编程日记 2024/11/15 16:14:42