float浮动覆盖的问题

Question

<style type="text/css">
   *{margin:0;padding: 0;}
   body{min-width: 700px; }
   .top,
   .footer{float:left;
           width:70%;
           height: 40px;
           background:#ddd;
           line-height: 40px;
           text-align: center;
           } 
   	</style>

<div class="top">11111111111111</div>
<div class="container">
  <div class="main">333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</div>
  <div class="left">2222222222222</div>
  <div class="right">44444444444444444</div>
</div>
<div class="footer">555555555555555555</div>

想问下头部设置了浮动的话，中间的div里的文字是不会被提上去或者被遮盖吗？

Answer 1

你要知道浮动最初设计出来是用来做什么的,浮动是可以用来做文字环绕图片的.图片设置浮动之后,它之后的元素就可以环绕它.你可以吧main元素设置的短一点.就会发现了,之所以你看到main没有提上去,是因为你的文字太长,又不能换行,浮动元素剩下的那半部分放不下main函数..main{ word-wrap: break-word; word-break: break-all; }这样设置一下强制断行,你就能看到文字环绕了

Answer 2

遮盖要写定位的浮动的话如果长度超宽会自动换行的~