问题描述

与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挡住呢？

解决方案

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

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

解决方案二：
要想覆盖，position改为absolute或者fixed定位，不会占用文档位置，float是浮动布局，可以left/right

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

解决方案三：
float只是在文档流中左或右浮动，box1还是在文档流中的，只是位置变了。
position：absolute/fixed，才是脱离文档流。