文章目录
BFC
BFC即块级格式化上下文（Block Formatting Context），它是Web页面中盒模型布局的CSS渲染模式，相当于一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。以下为你介绍BFC的触发条件和应用场景：
- 触发BFC的条件
- 根元素：HTML 文档中的根元素
<html>本身就创建了一个BFC。 - 浮动元素：当元素的
float属性值不是none（如float: left或float: right）时，该元素会创建一个BFC 。 - 绝对定位元素：元素的
position属性值为absolute或fixed时，会触发BFC。 - 行内块元素：具有
display: inline-block属性的元素会创建BFC。 - 表格单元格：元素的
display属性值为table-cell（HTML表格单元格默认的display属性值）时，会触发BFC。 - overflow值不为visible的元素：当元素的
overflow属性值不为visible，例如overflow: auto、overflow: hidden或overflow: scroll时，该元素会创建一个BFC。
- 根元素：HTML 文档中的根元素
- BFC的应用场景
- 清除浮动：在一个包含浮动元素的容器中，如果不进行处理，容器的高度会塌陷，因为浮动元素脱离了正常文档流。通过触发容器的BFC（例如设置
overflow: hidden），BFC会包含浮动元素，计算高度时会把浮动元素的高度也计算在内，从而实现清除浮动，使容器正确显示其包含内容的高度。 - 防止垂直边距重叠：在文档流中，两个相邻的块级元素（例如两个
<div>元素）的垂直外边距（margin-top和margin-bottom）会发生重叠现象。当其中一个元素触发BFC时（例如设置display: inline-block或overflow: hidden等），这个元素就处于一个独立的BFC容器中，与外部元素的垂直边距重叠问题就会得到解决。BFC内部元素的垂直外边距仍然会与BFC内其他元素的垂直外边距发生重叠，但不会与BFC外部的元素产生边距重叠。 - 实现两栏布局：可以利用BFC实现简单的两栏布局。例如，左侧栏设置为
float: left，触发自身的BFC，使其宽度根据内容自适应，并且不会影响右侧栏的布局。右侧栏设置overflow: hidden触发BFC，这样右侧栏会自适应剩余空间，并且与左侧栏不会产生边距重叠等问题，从而实现了两栏布局效果。
- 清除浮动：在一个包含浮动元素的容器中，如果不进行处理，容器的高度会塌陷，因为浮动元素脱离了正常文档流。通过触发容器的BFC（例如设置
SEO_17">语义化标签和SEO
语义化标签和SEO（搜索引擎优化）密切相关，合理使用语义化标签对提升网站在搜索引擎中的排名和可见性具有重要意义：
- 语义化标签的定义：语义化标签是HTML5引入的一系列标签，它们具有明确的含义，能清晰地描述其代表的内容。例如，
<header>标签用于定义页面或区域的头部，通常包含网站标志、导航栏等内容；<nav>标签专门用于标记导航链接部分；<article>标签用来表示文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容，比如一篇博客文章、一个新闻报道等。 - 语义化标签对SEO的积极影响
- 提升搜索引擎爬虫对页面的理解：搜索引擎爬虫通过解析HTML代码来理解页面内容。语义化标签能够清晰地标识页面各个部分的功能和内容，使得爬虫可以更快速、准确地理解页面的结构和主题。例如，当爬虫遇到
<article>标签时，它能立即识别出这是一篇独立的文章内容，并重点抓取其中的文本信息、标题等关键元素，从而更好地为页面内容建立索引。 - 有助于突出页面重点内容：在HTML页面中，合理使用语义化标签可以将重要的内容包裹在具有明确语义的标签内，从而使搜索引擎更容易识别和判断页面的重点信息。例如，将文章的标题放在
<h1>-<h6>标签中（其中<h1>标签表示最重要的标题，通常每个页面只使用一次），搜索引擎会根据这些标签的语义来判断标题的重要性，并在搜索结果中突出显示相关标题，提高页面在搜索结果中的吸引力和点击率。 - 增强页面的可访问性和用户体验，间接利于SEO：语义化标签不仅对搜索引擎友好，也有助于提升页面的可访问性，改善用户体验。例如，屏幕阅读器等辅助技术可以利用语义化标签来更好地向视力障碍用户传达页面内容和结构。当用户能够更轻松、便捷地浏览和理解页面内容时，他们在页面上的停留时间会更长，跳出率会更低，这些积极的用户行为信号会被搜索引擎视为页面质量高、用户体验好的重要依据，从而在搜索排名算法中给予该页面更高的权重和排名，间接促进了网站的SEO效果。
- 利于构建清晰的网站结构，便于搜索引擎索引：使用语义化标签有助于创建一个逻辑清晰、层次分明的网站结构。在大型网站中，清晰的结构可以使搜索引擎爬虫更高效地遍历整个网站，发现和索引更多有价值的页面内容。例如，通过
<nav>标签明确标记出网站的导航栏部分，搜索引擎可以根据导航栏中的链接关系快速了解网站的整体架构和页面之间的关联，从而更准确、全面地为网站页面建立索引，提高网站在搜索引擎中的收录量和曝光机会，对SEO产生积极的推动作用。
- 提升搜索引擎爬虫对页面的理解：搜索引擎爬虫通过解析HTML代码来理解页面内容。语义化标签能够清晰地标识页面各个部分的功能和内容，使得爬虫可以更快速、准确地理解页面的结构和主题。例如，当爬虫遇到
语义化标签实例
页面结构类
<header>：用于页面或区块的头部，通常包含网站的logo、导航栏、搜索框等内容。在SEO方面，搜索引擎会将其识别为页面的“开头”部分，有助于提高页面结构的清晰度，让搜索引擎快速了解页面的重要区域。<nav>：标记页面中的导航链接区域。例如，一个电商网站的顶部导航菜单或侧边栏导航都可以用<nav>包裹。搜索引擎可以识别该区域的链接，并优先索引相关的导航内容，方便搜索引擎爬虫抓取页面的关键链接，提高网站的整体索引效率。<main>：表示页面的主要内容区域，每个页面应该只有一个标签。如博客文章的正文内容、新闻页面的主要新闻报道等都应放在内。这有助于搜索引擎快速定位到页面的核心内容，集中精力抓取和索引主要内容，提高主要内容在搜索结果中的权重。<article>：用于表示独立的内容块，例如新闻文章、博客帖子、评论等。比如一篇技术博客文章，从标题到正文内容都可以放在标签内。搜索引擎能够识别并索引 <article>标签中的内容，提高相关性和排名，使文章在搜索结果中更易被用户找到。
相关文章
element-ui制作多颜色选择器
将颜色存储到一个数组中去。
<template><div class"color-picker-container" style"margin-top: 10px;"><!-- 显示已选颜色 --><div class"color-selection"><divv-for"(color, index) in selectedColors"…
4.若依 BaseController
若依的BaseController是其他所有Controller的基类，一起来看下BaseController定义了什么 1. 定义请求返回内容的格式
code/msg/data 返回数据格式不是必须是AjaxResult，开发者可以自定义返回格式，注意与前端取值方式一致即可。
2. 获取调用…
【React】class组件extends继承原理
目录 class语法基于extends实现继承 在学习React中的
class组件时，先巩固一下ES6中class语法和继承原理，后面介绍如何基于extends实现继承。 class语法
静态属性和方法是属于类本身的，而不是类的实例对象。静态成员通常用于描述类的特征或功…
WebSocket实现分布式的不同方案对比
引言
随着实时通信需求的日益增长，WebSocket作为一种基于TCP的全双工通信协议，在实时聊天、在线游戏、数据推送等场景中得到了广泛应用。然而，在分布式环境下，如何实现WebSocket的连接管理和消息推送成为了一个挑战。本文将对比几…
el-tree树结构在名称后面添加其他文字
//在 el-tree 中使用 render-content 插槽来展示文件大小
<template><div><el-treeref"tree"v-loading"treeData.loading":data"treeData.data"node-key"id" :props"defaultProps":render-content"rend…
【数据分析】02- A/B 测试：玩转假设检验、t 检验与卡方检验
一、背景：当“审判”成为科学
1.1 虚拟场景——法庭审判
想象这样一个场景：有一天，你在王国里担任“首席审判官”。你面前站着一位嫌疑人，有人指控他说“偷了国王珍贵的金冠”。但究竟是他干的，还是他是被冤枉的&…
MongoDB单机版安装
MongoDB单机版安装
在CentOS Linux release 7.9.2009 (Core)下安装MongoDB的步骤如下：
1 创建用户和组（可选，根据需要）
如果您希望以非root用户运行MongoDB服务，可以创建一个专用的用户和组。
groupadd mongodb
us…