【CSS】什么是BFC?BFC有什么作用?

【CSS】什么是BFC?BFC有什么作用?

  • 一、BFC概念
  • 二、触发BFC
  • 三、BFC特性即应用场景
    • 1、解决margin塌陷的问题
    • 2、避免外边距margin重叠(margin合并)
    • 3、清除浮动
    • 4、阻止元素被浮动元素覆盖

一、BFC概念

BFC(block formatting context)块级格式化上下文,他是页面中的一块渲染区域,并且有一套属于自己的渲染规则,BFC 是一个独立的布局环境,具有BFC特性的元素可以看作是隔离的独立容器,容器里面的元素不会在布局上影响到外面的元素。

二、触发BFC

  • 浮动元素(元素的float不是none)
  • 绝对定位元素(元素的position为absolute 或 fixed)
  • display为inline-block、table-cell、table-caption、table、table-row、table-row-group、table-header-group、table-footer-group、inline-table、flow-root、flex或 inline-flex、grid或 inline-grid
  • overflow值不为visible的块元素
  • contain 值为layout、content 或 paint的元素
    多列容器(元素的column-count或 column-width 不为auto,包括 column-count为1)

三、BFC特性即应用场景

1、解决margin塌陷的问题

问题:当父元素包裹着一个子元素的时候,当给子元素设置margin-top:100px,此时不应该看到的是子元素距离父元素顶部100px嘛?为什么是父元素距离body100px?
原因父元素与子元素之间,给子元素添加margin-top属性时,此时只是想让子元素的边框距离父元素边框有一段距离,而却出现了父元素的顶端距离body这个边框出现了位移,这就是margin-top塌陷的现象。

	.container{
		height: 300px;
		width: 300px;
		background-color: blue;
		/* overflow: hidden; */
	}
	.box {
		background: red;
		height: 100px;
		width: 100px;
		margin-top: 50px;
	}
	<div class="container">
		<div class="box">
		</div>
	</div>

在这里插入图片描述

解决方案:给父元素添加overflow:hidden触发BFC;

	.container{
		height: 300px;
		width: 300px;
		background-color: blue;
	    overflow: hidden; 
	}

在这里插入图片描述

2、避免外边距margin重叠(margin合并)

问题:两个兄弟块元素,一个设置下外边距100px,一个设置上外边距100px,此时它们不应该是相距200px才对嘛?为什么只相距了100px?
原因兄弟之间的元素,垂直方向的margin-bottom和margin-top会合并为单个边距,其大小为单个边距的最大值,如果值一样则值仅为其中一个。这就是外边距重叠现象。

	.box {
		background: red;
		height: 100px;
		width: 100px;
	}
	<div class="box" style="margin-bottom: 100px;">
	</div>
	<div class="box" style="margin-top: 100px;">
	</div>

在这里插入图片描述
解决办法每个元素放置不同的BFC中,通过overflow: hidden;触发BFC;

	.container {

		overflow: hidden;
	}
	.box {
		background: red;
		height: 100px;
		width: 100px;
	}
	<div class="container">
		<div class="box" style="margin-bottom: 100px;">
		</div>
	</div>
	<div class="container">
		<div class="box" style="margin-top: 100px;">
		</div>
	</div>

在这里插入图片描述

3、清除浮动

问题:如下代码,难道不应该看到的是一个黑色边框包裹这个一个红色方框,但是我们看到的是一个2px的高度和红色方块;

	.container{
		border: 1px solid;
	}
	.box {
		background: red;
		height: 100px;
		width: 100px;
		float: left;
	}
	<div class="container">
		<div class="box">
		</div>
	</div>

在这里插入图片描述

原因:这是因为给子元素添加了浮动,使它脱离了文档流;
解决方案:通过overflow:hidden触发BFC;

	.container{
		border: 1px solid;
		overflow: hidden;
	}

在这里插入图片描述

4、阻止元素被浮动元素覆盖

问题:红色方框覆盖蓝色方块;
原因:这是因为给红色方框添加了浮动,使它脱离了文档

	.box {
		background: red;
		height: 100px;
		width: 100px;
		float: left;
	}
	.box1 {
		background: blue;
		height: 300px;
		width: 300px;
	}
	<div class="box">
	</div>
	<div class="box1">
	</div>

在这里插入图片描述
解决方案:给正常的元素通过overflow:hidden触发BFC;即个box1添加;overflow:hidden;

	.box1 {
		background: blue;
		height: 300px;
		width: 300px;
		overflow:hidden;
	}

在这里插入图片描述

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

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

相关文章

俏美韵实现多场景养身 树立健康养身新要义

近年来&#xff0c;“年轻”在现代社会被符号化与视觉化&#xff0c;老年化的肉身迹象出现让“不甘衰老”的青年们困扰不安。然而这代年轻人的养身模式堪称为矛盾的集合体&#xff0c;他们挣扎在放纵与自律之间。一方面&#xff0c;他们想尽办法来创造各式各样的身体“保养”方…

阿里集团基于 Fluid+JindoCache 加速大模型训练的实践

作者&#xff1a;王涛(扬礼) 陈裘凯(求索) 徐之浩(东伝) 一、背景 时间步入了 2024 年&#xff0c;新的技术趋势&#xff0c;如大模型/AIGC/多模态等技术&#xff0c;已经开始与实际业务相结合&#xff0c;并开始生产落地。这些新的技术趋势不仅提高了算力的需求&#xff0c;也…

23、数据结构/查找相关练习20240205

一、请编程实现哈希表的创建存储数组{12,24,234,234,23,234,23},输入key查找的值&#xff0c;实现查找功能。 代码&#xff1a; #include<stdlib.h> #include<string.h> #include<stdio.h> #include<math.h> typedef struct Node {int data;struct n…

VXLAN:虚拟化网络的强大引擎

1.什么是VXLAN VXLAN&#xff08;Virtual eXtensible Local Area Network&#xff0c;虚拟扩展局域网&#xff09;&#xff0c;是由IETF定义的NVO3&#xff08;Network Virtualization over Layer 3&#xff09;标准技术之一&#xff0c;是对传统VLAN协议的一种扩展。VXLAN的特…

mysql 多数据源

依赖 <dependencies><!--mysql连接--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!--多数据源--><dependency><g…

第3节、电机定速转动【51单片机+L298N步进电机系列教程】

↑↑↑点击上方【目录】&#xff0c;查看本系列全部文章 摘要&#xff1a;本节介绍用定时器定时的方式&#xff0c;精准控制脉冲时间&#xff0c;从而控制步进电机速度。 一、计算过程 电机每一步的角速度等于走这一步所花费的时间&#xff0c;走一步角度等于步距角&#xff…

Meta开源大模型LLaMA2的部署使用

LLaMA2的部署使用 LLaMA2申请下载下载模型启动运行Llama2模型文本补全任务实现聊天任务LLaMA2编程Web UI操作 LLaMA2 申请下载 访问meta ai申请模型下载&#xff0c;注意有地区限制&#xff0c;建议选其他国家 申请后会收到邮件&#xff0c;内含一个下载URL地址&#xff0c;…

电商开放API商品采集接口、关键字搜索接口,获取商品ID、商品主图接口

API是application programming interface&#xff08;应用程序接口&#xff09;的简称&#xff0c;是一些预先定义的函数&#xff0c;目的是提供应用程序与开发人员基于某软件或硬件的以访问一组例程的能力&#xff0c;而又无需访问源码&#xff0c;或理解内部工作机制的细节。…

【敏捷开发】关于敏捷开发的几点思考,推荐一些高效书籍一起学

【敏捷开发】关于敏捷开发的几点思考&#xff0c;推荐一些高效书籍 一、背景二、敏捷宣言三、极限编程四、如何进行敏捷&#xff1f;4.1 改变软件研制方式4.2 组件高效团队4.3 改善研制流程4.4 持续集成与交付 五、Scrum过程六、书籍推荐 一、背景 软件开发的未来一定是多变的…

可解释性AI(XAI)的主要实现方法和研究方向

文章目录 每日一句正能量前言主要实现方法可解释模型模型可解释技术 未来研究方向后记 每日一句正能量 当你还不能对自己说今天学到了什么东西时&#xff0c;你就不要去睡觉。 前言 随着人工智能的迅速发展&#xff0c;越来越多的决策和任务交给了AI系统来完成。然而&#xff…

介绍docker

一&#xff1a;介绍docker&#xff1a; Docker 并没有单独的图形界面&#xff0c;它主要通过命令行来进行管理和操作 1、 docker ps&#xff1a;显示正在运行的容器。 docker images&#xff1a;显示本地的镜像。 docker run&#xff1a;创建并启动一个新容器。 docker stop&a…

探索LLM的意图识别能力

不可否认的是&#xff0c;LLM&#xff08;例如 OpenAI 的 GPT 系列&#xff09;将在不断发展的对话式 AI 领域发挥重要作用。 关于使用 ChatGPT 执行各种任务的帖子和文章不计其数。 GPT 有几个关键功能值得进一步探索&#xff0c;例如其摘要、分类和生成文本的能力。 其中&…

【软考设计师笔记】一篇文章带你了解数据库

【考证须知】IT行业高含金量的证书(传送门)&#x1f496; 【软件设计师笔记】计算机系统基础知识考点(传送门) &#x1f496; 【软件设计师笔记】程序语言设计考点(传送门) &#x1f496; 【软件设计师笔记】操作系统考点(传送门)&#x1f496; 【软件设计师笔记】什么是软…

SQL,HQL刷题,尚硅谷

目录 相关表数据&#xff1a; 题目及思路解析&#xff1a; 汇总分析 1、查询编号为“02”的课程的总成绩 2、查询参加考试的学生个数 分组 1、查询各科成绩最高和最低的分&#xff0c;以如下的形式显示&#xff1a;课程号&#xff0c;最高分&#xff0c;最低分 2、查询每门课程…

Python中的for循环用法详解,一文搞定它

文章目录 for循环1.for循环的基本语法&#xff08;1&#xff09;遍历不等长多级容器&#xff08;2&#xff09;遍历不等长多级容器&#xff08;3&#xff09;遍历等长的容器 2.变量的解包3.for...else【详细讲解】4.range对象5.总结6.打印 1 ~ 10 跳过57.打印菱形小星星 for循环…

多彩贵州人文山水展风采,微环境监测智能调控护古韵

一、人文山水时光峰峦——多彩贵州历史文化展 2月3日&#xff0c;贵州省博物馆向公众开放《人文山水时光峰峦——多彩贵州历史文化展》。6000平方米展厅里&#xff0c;从石器时期开始&#xff0c;通过六个篇章&#xff0c;用3503件文物的回忆链&#xff0c;系统化的向观众揭开…

Android9~Android13 某些容量SD卡被格式化为内部存储时容量显示错误问题的研究与解决方案

声明:原创文章,禁止转载! Android9~Android13 某些容量SD卡被格式化为内部存储时容量显示错误问题的研究与解决方案 分析Android11 系统对于EMMC/UFS作为内部存储、SD卡被格式化为内部存储、SD卡/U盘被格式化为便携式存储的不同处理 一.现象描述 实测Android9 Android10 A…

2024Node.js零基础教程(小白友好型),nodejs新手到高手,(五)NodeJS入门——http模块

044_http模块_创建HTTP服务端 hello&#xff0c;大家好&#xff0c;那这个小节我们来使用 nodejs 创建一个 http 的服务&#xff0c;有了这个 http 服务之后&#xff0c;我们就可以处理浏览器所发送过来的请求&#xff0c;并且还可以给这个浏览器返回响应。 顺便说一下&#x…

【傻瓜式教程】docker运行facechain

首选&#xff0c;为了防止后期docker满&#xff0c;Docker容器 - 启动报错&#xff1a;No space left on device&#xff0c;更换一下docker存储位置 1、停止Docker服务 首先停止Docker守护进程&#xff0c;可以使用以下命令&#xff1a; sudo systemctl stop docker 备份现有…

abap - 发送邮件,邮件正文带表格和excel附件

发送内容 的数据获取&#xff1a; 正文部分使用cl_document_bcs>create_document静态方法实现 传入参数为html内表结构 CLEAR lo_document .lo_document cl_document_bcs>create_document(i_type HTMi_text lt_htmli_length conlengthsi_subject lv_subje…