子元素浮动超出父元素的原因是什么？

子元素浮动超过父元素的原因分析

关于子元素浮动超过父元素的问题，其根本原因在于：

1. 父元素中含有块级元素（如 <p> 标签）和浮动元素（如 <span> 标签），而块级元素会占据整行。
2. 子元素浮动后，它会在当前行内向右浮动，而不是浮动到父元素上。
3. 如果父元素的高度固定且行高与父元素高度相近，子元素浮动后会看似脱离了父元素，实则仍在父元素内。

解决方法

要解决此问题，可以将浮动元素移动到块级元素之前，如：

<div class="content">
  <div class="part1">
    <div class="box1">
      <span>
        <a href="#">
          <img src="##" />
        </a>
      </span>
      <p>学院标签</p>
    </div>
  </div>
  <div class="part2">2</div>
</div>

调整后的代码将如下所示：

[图片.png]

通过调整 <span> 标签的位置，子元素能够与块级元素并排显示，解决子元素浮动到父元素父元素的问题。