带align="left"的table导致页面区块布局异常的技术咨询

(a) 问题产生的原因 #

你遇到的这个布局问题，核心在于align="left"这个旧HTML属性的行为：当给table设置align="left"时，浏览器会把它解析成**CSS左浮动（float: left）**的效果。

浮动元素的特性是会脱离正常的文档流——简单说就是它不再占据原来的垂直空间，后面的块级元素会自动“贴”到它的右侧，形成文字环绕的效果。而你的.content容器没有处理浮动带来的高度塌陷问题：容器本身的高度不会被浮动的表格撑开，导致下一个section的.header元素直接跑到了表格的同一行，而不是换行到表格下方。

这也是为啥去掉align="left"就正常了——此时表格是普通的块级元素，会占据完整的垂直空间，后面的元素自然会换行。

(b) 无需修改外部内容的修复方案 #

因为你无法控制外部插入的内容，咱们可以从自己的容器样式入手，通过清除浮动或者创建BFC来解决：

方案1：用伪元素清除浮动（推荐，不额外修改DOM）

给.content添加一个伪元素，强制容器包裹住内部的浮动元素：

div.content::after {
  content: "";
  display: table;
  clear: both;
}

这个伪元素会在.content的末尾生成一个看不见的块级元素，它会清除左右两侧的浮动，让.content重新获得正确的高度，后面的section也就会回到正常的文档流位置。

方案2：利用BFC（块格式化上下文）包裹浮动元素

给.section或者.content添加overflow属性，触发BFC特性，让容器自动包裹内部的浮动元素：

div.section {
  overflow: hidden; /* 或者 overflow: auto; 效果类似 */
}

BFC会阻止外部元素环绕内部的浮动元素，同时避免容器高度塌陷，布局就能恢复正常。

方案3：强制标题清除浮动

直接给所有.header元素添加clear: both规则，不管前面有没有浮动元素，标题都会强制换行到浮动元素的下方：

div.header {
  clear: both;
  /* 保留你原来的样式 */
  background-color: lightblue;
  border: solid black;
  border-width: thin 0;
  width: 100%;
}

这个方法简单直接，能确保每个标题都单独占据一行，不受前面内容的浮动影响。

以上三种方案在Chrome、Firefox、Edge、Opera等主流浏览器中都能生效，无需修改外部插入的内容。

内容的提问来源于stack exchange，提问作者user1636349