浮动并包装内容宽度

Question

为什么如果我为我的主要内容添加一个宽度，它不再包裹我的浮动div？

<div style="float:left;width:30%;">
   content1 content1 content1 content1 content1 content1 content1 content1
</div>

<div id="mainContent" style="width:30%;">
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
</div>

https://jsfiddle.net/ty9wuLeh/4/

Answer 1

您的浮动div应该包含在mainContent div中：

    <div id="mainContent">
    <div style="float:left;width:30%;">
      content1 content1 content1 content1 content1 content1 content1 content1
    </div>
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
    </div>

https://jsfiddle.net/ty9wuLeh/6/