html - 两个 float 元素，第二个元素超出父元素的宽度

Question

如您所见，我有两个 float 元素，第一个 70% 宽度，第二个 30%，但第二个超出父宽度，这怎么可能？我希望它坏了..在右边不要出去

.first {
  width: 30%
}
.second {
  width: 70%
}

<div class="parent clear ">
  <div class="fl first">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, tellus eget sagittis placerat, lectus massa cursus massa, at rhoncus est turpis non libero. Sed vel justo ac nisl suscipit porta. Mauris commodo eleifend volutpat...
  </div>

  <div class="fr second">
    dsdadsaddsadasddsdsadsadasadsdadsaddsadas ddsdsadsadasadsdadsaddsadasddsdsadsadasa
  </div>

</div>
<!-- end parent -->

Answer 1

我只能假设您的 clearfix 有问题。这是您想要的快速 jsfiddle。

我添加了一个边框，这样您就可以看到它不会超出父级。

https://jsfiddle.net/2cggv0sv/

.first {
  width: 30%;
}

.second {
  width: 70%;
}

.fl {
  float: left;
}

.clear {
  border: 2px solid red;
}

.clear:before,
.clear:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clear:after {
    clear: both;
}

<div class="clear">

<div class="fl first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, tellus eget sagittis placerat, lectus massa cursus massa, at rhoncus est turpis non libero. Sed vel justo ac nisl suscipit porta. Mauris commodo eleifend volutpat...
</div>
<div class="fl second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque scelerisque, tellus eget sagittis placerat, lectus massa cursus massa, at rhoncus est turpis non libero. Sed vel justo ac nisl suscipit porta. Mauris commodo eleifend volutpat...
</div>
</div>