首页 新闻 赞助 找找看

浮动虽然会脱离原来的文档流?

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啊,没有很明白啊,呜呜?请求大神解答,小女子在此先感谢各位~~
怪你无可取代的主页 怪你无可取代 | 菜鸟二级 | 园豆:244
提问于:2016-07-24 11:14
< >
分享
最佳答案
0

看这篇经典博文——经验分享:CSS浮动(float,clear)通俗讲解,你就会知道

奖励园豆:5
dudu | 高人七级 |园豆:31075 | 2016-07-24 12:27
其他回答(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了,而非我们代码中描述的父容器了。

 

其实我在一本正经的胡说八道。

之奇一昂 | 园豆:1421 (小虾三级) | 2016-07-24 13:13
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>

笑叹、 | 园豆:34 (初学一级) | 2016-07-25 10:29
0

 浮动 不会占据空间,但是浏览器会默认将内容挤出来,所以才有了清楚浮动的说法.

小精灵儿Pawn | 园豆:470 (菜鸟二级) | 2016-07-25 18:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册