修改footer宽度时正文文字右移，如何实现文字固定在图片旁的布局

问题原因 #

• footer被放在<main>标签内部，修改footer宽度时会改变父容器<main>的排版可用空间，导致上方图文的排版位置跟着偏移
• 用img的align属性实现的浮动排版没有做边界控制，段落排版容易受后续元素宽高变化的影响

解决方案 #

步骤1：调整HTML结构 #

把<footer>从<main>标签中移出，避免footer的样式修改影响正文区域的排版，修改后结构如下：

<main>
  <img src="https://onlycrumbsremain.com/wp-content/uploads/2020/10/dinner-roll-9.jpg" alt="10 kinds of bread" width="400" height="300" align="left">
  <p>Lorem ipsum...</p>
  <img src="https://imgix.bustle.com/mic/kwojkqt6twmbxd7d525gm9bzrcfnccm940okdfbtbxc3c3lnchh2v6bh907bdigs.jpg?w=1200&h=630&fit=crop&crop=faces&fm=jpg" alt="10 kinds of bread" width="400" height="300" align="right">
  <p>Lorem ipsum...</p>
</main>
<footer>
  <p>&copy; 2021 Private Bread | The best online bread store!</p>
</footer>

步骤2：补充CSS样式 #

给正文区域<main>设置固定宽度和footer宽度匹配，同时给段落设置浮动边界控制，避免文字排版错乱：

/* 新增main样式 */
main {
  width: 700px;
  max-width: 100%;
  /* 可选：需要页面内容居中就加下面这行 */
  margin: 0 auto;
}

/* 新增段落样式，控制图文混排边界 */
main p {
  overflow: hidden; /* 触发BFC，让段落仅在浮动图片外的剩余空间排列 */
  margin-bottom: 15px;
}

/* 原有footer样式保留即可 */
footer {
  clear: both;
  background-color: brown;
  color: white;
  padding: 5px 20px;
  width: 700px;
  max-width: 100%;
  /* 可选：和main同步居中就加下面这行 */
  margin: 0 auto;
}

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