两个浮动元素，第二个元素超出父元素的宽度

Question

你可以看到，我有两个浮动元素，第一个是70％宽度，第二个是30％，但是第二个超出了父宽度，这是怎么回事？我想要它打破......在右边不要出去

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我只能假设您的clearfix存在问题。这是你想要的快速作品。

我添加了一个边框，这样你就可以看到它不在父母之外。

https://jsfiddle.net/2cggv0sv/

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你清理了漂浮物吗？这是一些有用的代码。

＆＃13;

＆＃13;

.parent {
  border: 1px solid red;
}
.first {
  width: 30%;
  float: left;
}
.second {
  width: 70%;
  float: left;
}
.clear {
  clear: both
}

＆＃13;

<div class="parent ">
  <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 class=' clear'>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您的屏幕截图中可能存在多种原因导致此问题，并且您提供的代码示例会以另一种方式出现（孩子们不是float）。

我只能怀疑您的元素使用默认box-sizing值（box-sizing: content-box;），同时在父级和/或子级上具有绝对值填充。尝试添加

*,
*:before,
*:after {
   box-sizing: border-box;
}

看看问题是否已经消失。