css - float 和换行内容宽度

Question

为什么如果我为我的主要内容添加一个宽度，它就不再包围我的 float 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

您的 float 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/