2 aver86 aver86 于 2014.11.30 13:01 提问

与position修改为float的元素相邻的内联元素会如何排版?

#box1{
background-color:red;
width:200px;
height:100px;
float:left;
}
#box2{
background-color:blue;
width:200px;
height:100px;
}
#box3{
background-color:yellow;
width:200px;
height:100px;
}
div id="box1" /div img src="test.jpg" width="200px" height="100px"/
div id="box2" /div
div id="box3" /div
为了代码的正常显示,所有的尖括号都被我去掉了。我的问题是:
第一个div因为float属性脱离了文档流,那么按照文档流的概念,图片应该从第一行第一列开始排版,可是为什么在实际中图片不会被box1挡住呢?

3个回答

xuzuning
xuzuning   Ds   Rxr 2014.11.30 15:14
已采纳

box1 虽然脱离了文档流,但并没有释放他所占据的空间
你把 < img src="test.jpg" width="200px" height="100px"/> 调到 box1 前面就可看到这一点

你若像我这样处理 html 标记(在 < 后面加个空格)测试代码时就方便了许多了

aver86
aver86 感谢亲的回答~尽管还是想不大通哦 ,但是没关系,我可以慢慢想啦~ 还有亲给的方法很好用,谢谢!
接近 3 年之前 回复
showbo
showbo   Ds   Rxr 2014.11.30 20:00

要想覆盖,position改为absolute或者fixed定位,不会占用文档位置,float是浮动布局,可以left/right

http://www.divcss5.com/rumen/r93.shtml

m949181240
m949181240   2014.12.03 13:33

float只是在文档流中左或右浮动,box1还是在文档流中的,只是位置变了。
position:absolute/fixed,才是脱离文档流。

Csdn user default icon
上传中...
上传图片
插入图片