如何设置让文本不受左侧浮动图片定位影响，避免帖子文字排版错乱

问题根源在于浮动元素脱离正常文档流挤压文字、样式属性优先级冲突、无效属性干扰三个方面，可通过以下方式修改：

1. 调整HTML结构 #

将图片移入.post容器内部，删除HTML标签中无效的自定义属性，修改后代码如下：

<div class="post">
  <img src="imgs/meuliboxklok.png" height="200" class="side-image" />
  <div align="left" >
    <!-- post title here -->
    <h1>&emsp;&emsp;<u>QUUX</u></h1>
  </div>

  <div style="font-size:18px">
    <!-- post body here -->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies commodo ultricies. Nullam eleifend aliquet mauris eu interdum. Morbi ac mauris nec metus rutrum malesuada eget a libero.</p>
  </div>
</div>

2. 更新CSS样式 #

改用绝对定位放置图片，避免挤压文字，修复margin优先级问题，给帖子左侧预留图片展示空间：

.post {
  /* 设为相对定位，作为图片的定位参照 */
  position: relative;
  /* 通用margin要放在具体方向margin前，避免覆盖 */
  margin: 1em;
  margin-top: 5em;
  margin-bottom: 2em;
  /* 左侧预留图片展示空间，可根据图片实际宽度调整数值 */
  padding-left: 160px;
  background-color: #181212;
  border: 2px solid red;
  text-align: center;
  box-shadow: 0px 0px 10px red; 
}

.side-image {
  /* 绝对定位，完全脱离文档流，不会挤压内部文字 */
  position: absolute;
  left: -40px;
  top: -90px;
}

.post h4 {
  text-align: center;
}

修改完成后，角色图会固定在帖子左上角的预期位置，不会再挤压内部的标题、正文内容。如果图片和文字间距不合适，调整.post的padding-left数值即可，图片位置偏移可调整.side-image的left、top数值。

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