解决子元素浮动到父元素的父元素的问题？

Question

急求！子元素设置了float：left，为什么是浮动到父元素的父元素（part1）上，而不是浮动到父元素（box1）上？想让这个子元素和学院新闻同行应该怎么办？
这是那个子元素

 .box1 span a{
        width: 38px;
        height: 25px;
        display:line-block;
        float: right;
}

这是那个子元素

这是整体：

Answer 1

看起来像是初学者，描述的问题阅读起来也比较吃力。

简单来说就是因为:

1. 你的 .box1 元素下有两个元素 p 标签和 span 标签。
2. p 是块级元素，所以它会占满整行，导致让 span 标签换行到下一行展示。
3. 因为已经换行了，所以你浮动的时候也只是在本行向右浮动。
4. 另外你的 .box 元素的高度你设置为了固定的 35px，文字行高也设置为了 34px。
5. 所以 .box “看起来” 会在 .part1 元素上，但其实它还是在 .box1 元素上的只是看起来脱离了 .box1 元素。

所以简单的调整就是把你的 span 标签移动到 p 标签之前就可以了

<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>

Answer 2

• 你把<p>和<span>颠倒一下顺序试试
• 现在布局一般都不用float了，除非是需要文字环绕效果。
• 学习flex布局，实现起来会简单的多。