浮动影响box3
来源：2-4 浮动 float
啊__佳佳佳鑫
2016-03-29 17:49
我觉得box3紧随box2后面不是应该受到box2浮动的影响吗？就是一直紧贴着box2啊？为什么会被覆盖在最下面，
写回答
关注
2回答
-
- Zickson
- 2016-03-29 18:51:02
float浮动就是脱离正常文档流了。可以想象成设置了float的box2为浮动在半空中，其后未设置float的box3还在地面上，自然可以占据box2原先在地面上的位置。
而如果box3也设置了浮动，则想象成box3也和box2一样脱离了文档流，但两个都浮动在空中处于同一层，自然就无法进行覆盖了。都设置浮动为什么会紧贴着是因为一旦将元素设置了float属性后，会隐式的将其属性改为inline-block。
拓展：可以试试在box3中加入一些文字然后再看看。会发现block类型的box3可以占据box2原先的位置，但是box3中的文字（inline以及inline-block类型）会环绕box2。想要渗入理解这一点可以去看CSS的haslayout。
-
- asuykda
- 2016-03-29 18:51:41
第三个盒子没有设置浮动，没有脱离文档流吧
企业网站综合布局实战
本课程重点介绍HTML/CSS实现常见企业网站布局的方法
157043 学习 · 1984 问题
相似问题