【前段基础入门之】=>CSS3新特性 BFC

在这里插入图片描述

什么是BFC( 概念)

在这里插入图片描述

W3C 上对 BFC 的定义:

在这里插入图片描述

MDN 上对 BFC 的定义:

在这里插入图片描述

简而言之

在这里插入图片描述
在这里插入图片描述


开启了BFC能解决什么问题

  • 元素开启 BFC 后,其子元素不会再产生 margin 塌陷问题
  • 元素开启 BFC 后,自己不会被其他浮动元素所覆盖
  • 元素开启 BFC 后,就算其子元素浮动,元素自身高度也不会塌陷

. 如何开启BFC

  • 根元素
  • 浮动元素
  • 绝对定位、固定定位的元素
  • 行内块元素
  • 表格单元格: table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption
  • overflow 的值不为 visible 的块元素
  • 伸缩项目
  • 多列容器
  • column-span 为 all 的元素(即使该元素没有包裹在多列容器中)
  • display 的值,设置为 flow-root

🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

时间序列预测(8) — Informer模型原理

目录 0 摘要 1 引言 2 定义 3 方法 3.1 高效的自注意力机制 3.2 稀疏度度量 3.3 ProbSparse稀疏自注意力机制 3.4 Encoder编码器 3.5 Decoder解码 参考视频:Informer原理及代码解析_哔哩哔哩_bilibili 0 摘要 长序列时间序列预测(LSTF&#x…

机器人制作开源方案 | 钻孔植树一体化沙漠车

作者:徐邦国、张博宇、刘露、李晶晶、吕洁秀单位:天津职业技术师范大学 机械工程学院指导老师:何永利 摘要:本项目旨在设计一种专用于沙漠植树的植树车,以沙漠自动化植树为研究对象,提出一种创新式钻…

【软件工程师从0到1】- Java面向对象基础 (知识汇总)

前言 介绍:大家好啊,我是hitzaki辰。 社区:(完全免费、欢迎加入)日常打卡、学习交流、资源共享的知识星球。 自媒体:我会在b站/抖音更新视频讲解 或 一些纯技术外的分享,账号同名:hi…

无痛卸载流氓杀毒软件Avast

文章目录 1\. 引言2\. 操作 1. 引言 与其说Avast是一个杀毒软件,不如说它是一个流氓软件,对于常用的微信QQ也进行拦截,我真的不知道意义何在 此外如果不小心安装上它之后,会出现一个问题:鼠标正常,电脑打字…

buildadmin+tp8表格操作(7)表格的事件监听

buildadmin 中的事件都已经在 baTable类中定义好了。我们一般不会去修改,万一我们要在事件上有所操作, 我们可以通过事件的 前置和后置 钩子函数来处理 那么我们是如何使用这些钩子呢? 我们只需要在 创建对象的时候,定义好这些钩…

企业怎样申请SSL证书?

对于很多企业而言,使用SSL证书加密网站已经显得尤为重要,这不仅仅是关乎企业的网站安全,同时也关系着企业的形象以及用户的信赖。既然使用https协议已经众多企业认可,那么我们该如何给自己的网站申请以及安装SSL证书? …

Nginx 413 Request Entity Too Large

当出现上图时候 更改nginx config 文件 在http{}或者server{}或者location{}中增加client_max_body_size 100m; 然后重启nginx 服务就好了

二进制部署k8s集群-过程中的问题总结(接上篇的部署)

1、kube-apiserver部署过程中的问题 kube-apiserver.conf配置文件更改 2、calico的下载地址 curl https://docs.projectcalico.org/v3.20/manifests/calico.yaml -O 这里如果kubernetes的节点服务器为多网卡配置会产生报错 修改calino.yaml配置文件 解决方法: 调…

Redis 学习

Redis 集群共3种集群模式: 1. 主从模式 (主写从读),写请求分配到主库,完后数据同步到从库,从库主要负责读请求 同步过程: 从库启动向主库发送同步请求,数据传输的形式是RDB文件&am…

CentOS安装nodejs

查看可安装的版本 dnf module list nodejs选择需要版本安装 dnf module install nodejs:<stream>查看版本

5分钟带你了解什么是敏捷测试?难点显而易见!

随着敏捷开发模式的普及&#xff0c;越来越多的测试同仁也开始了敏捷测试。那么究竟什么是敏捷测试&#xff1f;敏捷测试与传统测试的主要区别是什么&#xff1f;敏捷测试的难点又是什么&#xff1f;本文会对这三个问题进行讲解。注意&#xff1a;本文只是讲解敏捷测试概念相关…

同创永益联合红帽打造一站式数字韧性解决方案

随着AI技术的快速兴起&#xff0c;IT技术已成为推动业务持续增长的重要驱动力&#xff0c;这要求企业不断尝试新事物&#xff0c;改变固有流程&#xff0c;加强IT技术与业务的合作&#xff0c;同时提升数字韧性能力&#xff0c;以实现业务目标。10月26日&#xff0c;红帽2023中…

PC3329L DC-DC降压 10V-100V输入3A大流输出带EN功能实现零功耗只需极少元器件

1. PC3392L特性  通过使能脚关断实现零功耗  宽电压输入范围 10V 至 100V  最大输出电流 3A  集成功率 MOS 管  外围器件少  输出短路保护  温度保护  逐周期限流  输出电压灵活可靠  ESOP8 2. 描述 PC3392L 一款宽电压范围降压型 DC-DC 电源管…

Python 进程和线程详解(multiprocessing、threading)

文章目录 1 概述1.1 进程 VS 线程1.2 优缺点 2 进程2.1 三个步骤2.2 多进程2.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取进程编号2.5 设置进程守护 3 线程3.1 三个步骤3.2 多线程3.3 带参数2.3.1 元组参数 args2.3.2 字典参数 kwargs 2.4 获取线程编号2.5 设置…

3D建模基础教程:编辑多边形功能命令快捷方式

一、打开3D软件并创建新模型 首先&#xff0c;打开你的3D建模软件&#xff0c;比如Blender、Maya或3ds Max。然后&#xff0c;创建一个新的3D模型。你可以使用基本几何体来创建模型&#xff0c;也可以导入现有的模型。 二、进入编辑多边形模式 在主工具栏中&#xff0c;找到并…

设置指定时间之前的时间不可选

1、el-date-picker设置今天之前的日期不可选 <el-date-picker style"width: 100%" type"date" v-model"form.resetDate" align"right" :value-format"yyyy-MM-dd" placeholder"选择调整日期":disabled"t…

【带头学C++】----- 七、链表 ---- 7.5 学生管理系统(链表--上)

目录 1.main函数设计 2.定义Node节点类型 3.链表插入结点 在main函数中调用插入函数、打印函数 插入结点函数实现&#xff08;头插法&#xff09; 插入结点函数实现&#xff08;尾插法&#xff09; 遍历链表函数实现 4.演示插入、遍历结果 目录 1.main函数设计 2.定义…

dgl的cuda版本安装+对应torch的cuda版本安装

优秀教程 1、pytorch 1.8.1 CUDA11.1 对应的DGL版本是0.6.1&#xff08;linux、windows也适用&#xff09; 2、CUDApytorchDGL安装 3、安装dgl-cuda 4、torch 安装备忘录 dgl文件下载 https://anaconda.org/dglteam/repo可以将下面网址中的cu111改成你想要的版本&#xff0…

Vue网页中使用PDF.js弹窗显示pdf文档所有内容

本文中使用的PDF.js组件版本为3.11.174&#xff08;最新版使用上会有所不同&#xff09;&#xff0c;引入文件如下&#xff1a; 首先页面定义一个隐藏的弹窗块&#xff08;此处用ElementUI的Dialog组件&#xff09; <el-dialog ref"dialogPDF" :title"pdffi…

Zookeeper中的Watch机制的原理?

前言 Zookeeper是一个分布式协调组件&#xff0c;为分布式架构下的多个应用组件提供了顺序访问控制能力。它的数据存储采用了类似于文件系统的树形结构&#xff0c;以节点的方式来管理存储在Zookeeper上的数据 Zookeeper提供了一个Watch机制&#xff0c;可以让客户端感知到Zook…