标签和标签流，听起来像双胞胎
平时在写网页的时候，总能听到“标签”和“标签流”这两个词。很多人觉得它们差不多，其实差别不小。搞清楚它们的区别，写起HTML来会更顺手。
什么是标签
标签就是HTML里的基本单位，比如<p>、<div>、<span>这些，用尖括号包起来的那部分。它用来定义网页上某个内容的类型。比如：
<h1>这是一级标题</h1>
<p>这是一段文字</p>这里的 <h1> 和 <p> 就是标签，告诉浏览器：“这块是标题”，“这块是段落”。
那标签流又是什么
标签流不是某种特殊的标签，而是指标签在页面中默认的排列方式。你可以把它想象成水流，从上往下、从左到右自然流动。大多数块级元素（比如 <div>、<p>）会独占一行，一个接一个地往下排，就像排队买早餐一样，一个走了下一个才上。
举个例子：
<div>第一个盒子</div>
<div>第二个盒子</div>
<span>行内元素一</span>
<span>行内元素二</span>前两个 <div>会各占一行，垂直排列；而两个 <span>则会紧挨着出现在同一行，因为它是行内元素，跟着“流”走。
关键区别在哪
标签是静态的语法结构，是代码里写的那个东西；而标签流是动态的布局行为，是这些标签在页面上怎么排列。
换个说法：标签是你写的指令，标签流是浏览器执行这些指令时的默认方式。你没加CSS之前，页面长什么样，靠的就是这个“流”。
比如你写了一堆 <p> 标签，不用设置任何样式，它们也会自动一个换一行地显示出来，这就是标签流在起作用。
什么时候会打破这个流
一旦用了CSS里的 float、position: absolute 或者 display: flex、grid，标签就不再老老实实按原来的顺序排了。比如：
<div style="float: left; width: 50%;">左边</div>
<div style="float: left; width: 50%;">右边</div>这时候两个 div 不再上下排，而是并排了，标签流被打破了。等你把浮动清除，或者父容器恢复正常布局，流又回来了。
所以理解标签流，其实就是理解网页默认的“秩序”。知道它存在，才能更好控制什么时候让它保持，什么时候打破。