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

遮盖要写定位的

浮动的话如果长度超宽会自动换行的~