CSS中DIV内图片左浮动引发布局错乱问题的解决问询

你遇到的是CSS浮动特性导致的父容器高度塌陷问题：浮动元素会脱离正常文档流，包裹它的父容器.skill-row无法识别浮动元素的高度，不能被正常撑开，因此会出现上下模块内容错位重叠的异常。

可用解决方案 #

方案1：触发BFC（最简单快速） #

给父容器.skill-row添加overflow: auto属性，触发块级格式化上下文，让父容器可以正常包裹内部浮动元素，修改后的CSS如下：

.skill-row{ 
  width: 50%;
  margin: 100px auto 100px auto; 
  text-align: left; 
  line-height: 2;
  overflow: auto; /* 新增此行即可解决布局异常 */
}

方案2：伪元素清除浮动（无副作用，通用性强） #

如果担心overflow属性导致部分溢出内容被隐藏，可以用业内通用的clearfix方案，不会产生任何副作用：

1. 先在CSS中添加clearfix公共样式：

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

2. 给所有包含浮动元素的.skill-row容器添加clearfix类，HTML修改示例：

<div class="skill-row clearfix">
  <img class="muscle"src="images/strong.png" alt="muscle">
  <h3>Physical Capabilities</h3>
  <p>I am physically fit, tall and lean from years of playing outside.</p>
</div>
<div class="skill-row clearfix">
  <img class="brain" src="images/brainstorm.png" alt="brain">
  <h3>Intelligence</h3>
  <p>I am able to perform mathematical calculations with ease, and understand advanced concepts.</p>
</div>

优化建议 #

可以给浮动的图片添加右侧外边距，避免文字和图片紧贴，提升视觉效果：

.muscle, .brain {
  width: 25%;
  float: left;
  margin-right: 30px; /* 数值可根据设计需求调整 */
}

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