浮动虽然会脱离原来的文档流？
0
[已解决问题]
解决于 2017-05-01 22:04
<!doctype html> <html> <head> <meta charset="utf-8"> <title>浮动</title> <style> .box{ border:3px solid red; width:400px; clear:both;} .box1{border:3px solid green; width:100px; height:100px; float:left;} .box2{ border:3px solid orange; width:100px; height:100px;float:left;} </style> </head> <body> <div class="box">dsfs浮动虽然会脱离原来的文档流，但是还是会占据原来的物理空间，对吗？ <div class="box1"></div> <div class="box2"></div> </div> </body> </html>
上面是什么情况啊？浮动到底是什么gui啊，没有很明白啊，呜呜？请求大神解答，小女子在此先感谢各位~~
最佳答案
0
其他回答(3)
0
www.zhangxinxu.com/wordpress/2010/01/css-float浮动的深入研究、详解及拓展二/
前端圈可以关注 张鑫旭 大神啊~
个人根据大神说所讲然后自己的理解是:
float 只是改了一下在自己父节点下的顺序而已，再怎么float也跑不到父容器外面~
所以float以后的位置跟自己父容器有关，如果没有文字，那么两个DIV的父容器就是外面的DIV。
如果有了文字，就不一样了，文字外面有一个匿名inline box，inline-box外面有一个line-box（所以文字才会换行）,line-box外面才是div
所以，如果有了文字，那两个DIV和文字一样外面有了line-box父容器了~如果DIV前面的文字太多换行了，那DIV就不属于第一个line-box~直到文字不够一行了~
然后浏览器还会计算这个DIV和文字加起来宽度超了没有，如果超了，文字再来一行之后DIV会自己再new一行，没超的话文字和DIV一行。
好了，到此，DIV为什么不是在左上角的原因找出来了，因为文字太多导致div不属于第1个linebox。
<linebox>文字 DIV</linebox>
继续，DIV不是float:left了吗？会跑到父容器的最 left 边上啊，改一下顺序，所以就成了<linebox>DIV 文字</linebox>了。
好像说得通。
总结：
1. float是依据自己的父容器来的。
2. 如果div（不限于div）旁边有文字，那它就有了一个匿名的linebox父容器，自己的定位就成了依据linebox了，而非我们代码中描述的父容器了。
其实我在一本正经的胡说八道。
0
<style>
.box{ border:3px solid red; width:400px; clear:both;}
.box1{border:3px solid green; width:100px; height:100px; float:left;}
.box2{ border:3px solid orange; width:100px; height:100px;float:left;}
</style>
<div class="box">dsfs浮动虽然会脱离原来的文档流，但是还是会占据原来的物理空间，对吗？
<div class="box1"></div>
<div class="box2"></div>
<div style="clear:both;"></div>//加这个就好
</div>
0
浮动 不会占据空间,但是浏览器会默认将内容挤出来,所以才有了清楚浮动的说法.
