2024 CSS保姆级教程二 - BFC详解

前言 - CSS中的文档流

在介绍BFC之前,需要先给大家介绍一下文档流。​
我们常说的文档流其实分为定位流、浮动流、普通流三种。​

1. 绝对定位(Absolute positioning)​
如果元素的属性 position 为 absolute 或 fixed,它就是一个绝对定位元素。​
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。​
它的定位相对于它的包含块,相关CSS属性:top、bottom、left、right;​
对于 position: absolute,元素定位将相对于上级元素中最近的一个relative、fixed、absolute,如果没有则相对于body;​
对于 position:fixed,正常来说是相对于浏览器窗口定位的,但是当元素祖先的 transform 属性非 none 时,会相对于该祖先进行定位。​

2. 浮动 (float)​
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。​

3. 普通流 (normal flow)​
普通流其实就是指BFC中的FC。FC(Formatting Context),直译过来是格式化上下文,它是页面中的一块渲染区域,有一套渲染规则,决定了其子元素如何布局,以及和其他元素之间的关系和作用。​
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行。块级元素则会被渲染为完整的一个新行。​
除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。

BFC定义:

先看下MDN上关于BFC的定义:​

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视CSS渲染的一部分,是块盒子的布局过程发生的区域

,也是浮动元素与其他元素交互的区域。​

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。​
通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。​
除了 BFC,还有:​

  • IFC(行级格式化上下文)- inline 内联​
  • GFC(网格布局格式化上下文)- display: grid​
  • FFC(自适应格式化上下文)- display: flex或display: inline-flex​
    注意:同一个元素不能同时存在于两个 BFC 中。

BFC的触发方式​
MDN上对于BFC的触发条件写的很多,总结一下常见的触发方式有(只需要满足一个条件即可触发 BFC 的特性):​

  • 根元素,即 ​
  • 浮动元素:float 值为 left 、right​
  • overflow 值不为 visible,即为 auto、scroll、hidden​
  • display 值为 inline-block、table-cell、table-caption、table、inline-table、- – flex、inline-flex、grid、inline-grid​
  • 绝对定位元素:position 值为 absolute、fixed

BFC的特性​

  • BFC 是页面上的一个独立容器,容器里面的子元素不会影响外面的元素。​
  • BFC 内部的块级盒会在垂直方向上一个接一个排列​
  • 同一 BFC 下的相邻块级元素可能发生外边距折叠,创建新的 BFC 可以避免外边距折叠​
  • 每个元素的外边距盒(margin box)的左边与包含块边框盒(border box)的左边相接触(从右向左的格式的话,则相反),即使存在浮动​
  • 浮动盒的区域不会和 BFC 重叠​
  • 计算 BFC 的高度时,浮动元素也会参与计算

应用​
BFC是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然。我们可以利用BFC的这个特性来做很多事。
自适应两列布局​
左列浮动(定宽或不定宽都可以),给右列开启 BFC。

<div><div class="left">浮动元素,无固定宽度</div><div class="right">自适应</div></div>
* {margin: 0;padding: 0;}​
.left {float: left;height: 200px;margin-right: 10px;background-color: red;}​
.right {overflow: hidden;height: 200px;background-color: yellow;}

在这里插入图片描述
将左列设为左浮动,将自身高度塌陷,使得其它块级元素可以和它占据同一行的位置。​

  • 右列为 div 块级元素,利用其自身的流特性占满整行。​
  • 右列设置overflow: hidden,触发 BFC 特性,使其自身与左列的浮动元素隔离开,不占满整行。​
  • 这即是上面说的 BFC 的特性之一:浮动盒的区域不会和 BFC 重叠

防止外边距(margin)重叠​
兄弟元素之间的外边距重叠

<div><div class="child1"></div><div class="child2"></div></div>
* {margin: 0;padding: 0;}​
.child1 {width: 100px;height: 100px;margin-bottom: 10px;background-color: red;}​
.child2 {width: 100px;height: 100px;margin-top: 20px;background-color: green;}

在这里插入图片描述
两个块级元素,红色 div 距离底部 10px,绿色 div 距离顶部 20px,按道理应该两个块级元素相距 30px 才对,但实际却是取距离较大的一个,即 20px。​

块级元素的上外边距和下外边距有时会合并(或折叠)为一个外边距,其大小取其中的较大者,这种行为称为外边距折叠(重叠),注意这个是发生在属于同一 BFC 下的块级元素之间​

根据 BFC 特性,创建一个新的 BFC 就不会发生 margin 折叠了。比如我们在他们两个 div 外层再包裹一层容器,加属性 overflow: hidden,触发 BFC,那么两个 div 就不属于同个 BFC 了。

<div><div class="parent"><div class="child1"></div></div><div class="parent"><div class="child2"></div></div></div>
<div>​<div class="parent">​<div class="child1"></div>​</div>​<div class="parent">​<div class="child2"></div>​</div>​
</div>

在这里插入图片描述
这个关于兄弟元素外边距叠加的问题,除了触发 BFC 也有其他方案,比如你统一只用上边距或下边距,就不会有上面的问题。​

父子元素的外边距重叠​
这种情况存在父元素与其第一个或最后一个子元素之间(嵌套元素)。​
如果在父元素与其第一个/最后一个子元素之间不存在边框、内边距、行内内容,也没有创建块格式化上下文、或者清除浮动将两者的外边距 分开,此时子元素的外边距会“溢出”到父元素的外面。

<div id="parent"><div id="child"></div></div>
* {margin: 0;padding: 0;}​
#parent {width: 200px;height: 200px;background-color: green;margin-top: 20px;}​
#child {width: 100px;height: 100px;background-color: red;margin-top: 30px;}

在这里插入图片描述
如上图,红色的 div 在绿色的 div 内部,且设置了 margin-top 为 30px,但我们发现红色 div 的顶部与绿色 div 顶部重合,并没有距离顶部 30px,而是溢出到父元素的外面计算。即本来父元素距离顶部只有 20px,被子元素溢出影响,外边距重叠,取较大的值,则距离顶部 30px。​
解决办法:​

  • 给父元素触发 BFC(如添加overflow: hidden)​
  • 给父元素添加 border​
  • 给父元素添加 padding​
    这样就能实现我们期望的效果了:
    在这里插入图片描述
    清除浮动解决令父元素高度坍塌的问题​
    当容器内子元素设置浮动时,脱离了文档流,容器中总父元素高度只有边框部分高度
<div class="parent"><div class="child"></div></div>
* {margin: 0;padding: 0;}​
.parent {border: 4px solid red;}​
.child {float: left;width: 200px;height: 200px;background-color: blue;}

在这里插入图片描述
解决办法:给父元素触发 BFC,使其有 BFC 特性:计算 BFC 的高度时,浮动元素也会参与计算

.parent {overflow: hidden;border: 4px solid red;}

在这里插入图片描述
上面我们都是用的 overflow: hidden 触发 BFC,因为确实常用,但是触发 BFC 也不止是只有这一种方法。​
如上面写的所示,可以设置float: left;,float: right;,display: inline-block;,overflow: auto;,display: flex;,display: table;,position 为 absolute 或 fixed 等等,这些都可以触发,不过父元素宽度表现不一定相同,但父元素高度都被撑出来了。​
当然实际运用可不是随便挑一个走,还是根据场景选择。

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

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

相关文章

在PHP8内,用Jenssegers MongoDB扩展来实现Laravel与MongoDB的集成

在现代 web 开发中&#xff0c;MongoDB 作为一种流行的 NoSQL 数据库&#xff0c;因其灵活的文档结构和高性能而受到许多开发者的青睐。Laravel&#xff0c;作为一个优雅的 PHP Web 框架&#xff0c;提供了丰富的功能和优雅的代码风格。本文将指导你如何在 Laravel 项目中集成 …

GPU 环境搭建指南:如何在裸机、Docker、K8s 等环境中使用 GPU

本文主要分享在不同环境&#xff0c;例如裸机、Docker 和 Kubernetes 等环境中如何使用 GPU。 跳转阅读原文&#xff1a;GPU 环境搭建指南&#xff1a;如何在裸机、Docker、K8s 等环境中使用 GPU 1. 概述 仅以比较常见的 NVIDIA GPU 举例&#xff0c;系统为 Linux&#xff0c;…

Axure设计之左右滚动组件教程(动态面板)

很多项目产品设计经常会遇到左右滚动的导航、图片展示、内容区域等&#xff0c;接下来我们用Axure来实现一下左右滚动的菜单导航。通过案例我们可以举一反三进行其他方式的滚动组件设计&#xff0c;如常见的上下滚动、翻页滚动等等。 一、效果展示&#xff1a; 1、点击“向左箭…

每天五分钟深度学习框架pytorch:如何加载手写字体数据集mnist?

本文重点 那个这节课程之后,我们就将通过代码的方式来搭建CNN和RNN模型,然后训练,我们使用的数据集为pytorch中已经封装好的数据集,比如mnist,cafir10,本文我们学习一下如何在pytorch中使用它们,然后为之后的章节做准备,现在我们拿mnist来举例。 mnist和cafir10 MIN…

itextpdf打印A5的问题

使用A5打印的时候&#xff0c;再生成pdf是没有问题的。下面做了一个测试&#xff0c;在打印机中&#xff0c;使用A5的纸张横向放入&#xff0c;因为是家用打印机&#xff0c;A5与A4是同一个口&#xff0c;因此只能这么放。 使用itextpdf生成pdf&#xff0c;在浏览器中预览pdf是…

AJAX 全面教程:从基础到高级

AJAX 全面教程&#xff1a;从基础到高级 目录 什么是 AJAXAJAX 的工作原理AJAX 的主要对象AJAX 的基本用法AJAX 与 JSONAJAX 的高级用法AJAX 的错误处理AJAX 的性能优化AJAX 的安全性AJAX 的应用场景总结与展望 什么是 AJAX AJAX&#xff08;Asynchronous JavaScript and XML…

CKA认证 | Day1 k8s核心概念与集群搭建

第一章 Kubernetes 核心概念 1、主流的容器集群管理系统 容器编排系统&#xff1a; KubernetesSwarmMesos Marathon 2、Kubernetes介绍 Kubernetes是Google在2014年开源的一个容器集群管理系统&#xff0c;Kubernetes简称K8s。 Kubernetes用于容器化应用程序的部署&#x…

web实操1——只使用tomcat发布网站

安装tomcat 下载 肯定是去官网&#xff1a; http://tomcat.apache.org/ 下载之后&#xff0c;解压&#xff1a; &#xff01;&#xff01;解压后&#xff1a; logs日志&#xff1a;就是一些输出&#xff0c;输到文本里。 temp:一些临时文件(不用管) webapps:放网站的 work&…

数据结构:七种排序及总结

文章目录 排序一插入排序1直接插入排序2希尔排序二选择排序3直接选择排序4堆排序三 交换排序5冒泡排序6快速排序四 归并排序7归并排序源码 排序 我们数据结构常见的排序有四大种&#xff0c;四大种又分为七小种&#xff0c;如图所示 排序&#xff1a;所谓排序&#xff0c;就是…

A day a tweet(sixteen)——The better way of search of ChatGPT

Introducing ChatGPT search a/ad.及时的/及时地 ChatGPT can now search the web in a much better way than before so you get fast, timely a.有关的(relative n.亲戚,亲属;同类事物 a.比较的&#xff1b;相对的) answers with link…

HTMLCSS:呈现的3D树之美

效果演示 这段代码通过HTML和CSS创建了一个具有3D效果的树的图形&#xff0c;包括分支、树干和阴影&#xff0c;通过自定义属性和复杂的变换实现了较为逼真的立体效果。 HTML <div class"container"><div class"tree"><div class"…

系统规划与管理师——第十二章 职业素养与法侓法规

目录 职业素养 职业道德 行为规范 职业责任 对客户和公众的责任 法律法规 法律概念 法律体系 诉讼时效 民事诉讼时效 刑事追诉时效 常用的法律法规 合同法 招投标法 著作权法 政府采购法 劳动法 知识产权法 刑法修正案&#xff08;七) IT服务的广泛应用不仅…

HAL库硬件IIC驱动气压传感器BMP180

环境 1、keilMDK 5.38 2、STM32CUBEMX 初始配置 默认即可。 程序 1、头文件 #ifndef __BMP_180_H #define __BMP_180_H#include "main.h"typedef struct {float fTemp; /*温度&#xff0c;摄氏度*/float fPressure; /*压力&#xff0c;pa*/float fAltitude; /*…

沈阳乐晟睿浩科技有限公司抖音小店展望未来

在当今数字化浪潮汹涌的时代&#xff0c;电子商务以其独特的魅力和无限潜力&#xff0c;正深刻改变着人们的消费习惯与商业模式。抖音小店作为短视频与电商深度融合的产物&#xff0c;凭借其庞大的用户基础、精准的内容推送机制以及独特的购物体验&#xff0c;迅速崛起为电商领…

【论文复现】自动化细胞核分割与特征分析

本文所涉及所有资源均在这里可获取。 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 论文复现 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f496; 自动化细胞核分割与特征分析 引言效果展示HoverNet概述HoverNet原理分析整…

ESP32 gptimer通用定时器初始化报错:assert failed: timer_ll_set_clock_prescale

背景&#xff1a;IDF版本V5.1.2 &#xff0c;配置ESP32 通用定时器&#xff0c;实现100HZ&#xff0c;占空比50% 的PWM波形。 根据乐鑫官方的IDF指导文档设置内部计数器的分辨率&#xff0c;计数器每滴答一次相当于 1 / resolution_hz 秒。 &#xff08;ESP-IDF编程指导文档&a…

Jest项目实战(4):将工具库顺利迁移到GitHub的完整指南

开源代码&#xff1a;将工具库迁移到GitHub 随着项目的成熟和完善&#xff0c;将其开源不仅可以获得更多的用户和贡献者&#xff0c;还能促进项目本身的发展。GitHub作为全球最大的开源协作平台&#xff0c;自然成为了大多数开发者的首选。本文将引导您完成将工具库迁移至GitH…

C#线程池

目录 前言 线程 线程池 线程池的工作原理 重要方法 C#线程池总结 前言 线程池是一种多线程处理形式&#xff0c;它允许开发者将任务添加到队列中&#xff0c;然后线程池会自动管理线程的创建、分配和回收&#xff0c;以执行这些任务。线程池中的线程都是后台线程&#xf…

SpringBoot项目集成ONLYOFFICE

ONLYOFFICE 文档8.2版本已发布&#xff1a;PDF 协作编辑、改进界面、性能优化、表格中的 RTL 支持等更新 文章目录 前言ONLYOFFICE 产品简介功能与特点Spring Boot 项目中集成 OnlyOffice1. 环境准备2. 部署OnlyOffice Document Server3. 配置Spring Boot项目4. 实现文档编辑功…

用示例来看C2Rust工具的使用和功能介绍

C2Rust可以将C语言的源代码转换成Rust语言的源代码。下面是一个简单的C语言代码示例&#xff0c;以及使用c2Rust工具将其转换为Rust安全代码的过程。 C语言源代码示例 // example.c #include <stdio.h>int add(int a, int b) {return a b; }int main() {int result a…