网页开发问题：scallop模块H1与P元素无法居中对齐

问题出在浮动未清除：.TitleHeading 元素设置了 float: left，但没有对该浮动进行清除，导致后续的 .scallop 元素被浮动元素干扰，布局偏移，使得内部的 h1 和 p 无法正常居中。

修复方案（二选一即可） #

方案1：给 .firstbreak 添加清除浮动属性 #

修改 .firstbreak 的 CSS 代码，添加 clear: both：

.firstbreak {
  width: 100%;
  height: 50px;
  border: none;
  background-color: #e2bdf9;
  clear: both; /* 新增：清除左右两侧的浮动 */
}

方案2：给 .TitleImage 添加闭合浮动的属性 #

给包含浮动元素的父容器 .TitleImage 添加 overflow: hidden，让它闭合内部浮动：

.TitleImage {
  overflow: hidden; /* 新增：闭合内部浮动 */
}

原理说明 #

浮动元素会脱离正常文档流，父容器无法感知其高度，后续元素会“贴”在浮动元素旁边排列。通过清除浮动或闭合浮动，能让后续的 .scallop 元素回到正常文档流中，此时它的宽度会正常占据父容器，内部设置的 text-align: center 就能生效，实现文本居中。

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