为什么设置了float的div会遮住第二个div，而当第二个div不是div而是p时却不会被遮住，而是环绕在右边？（包括img标签）
个人总结：
就是float覆盖不能覆盖文字 就对了。3个div1,2,3, div1浮动了，2，3向上，1覆盖了2，2的文字还是会显示的，不过可能排版不太好看，文本会出现在下一行中，就是div3上。
另：
img标签：
1 <html> 2 3 <head> 4 <style type="text/css"> 5 img 6 { 7 width:200px; 8 height:200px; 9 } 10 div{ 11 width:200px; 12 height:200px; 13 } 14 </style> 15 </head> 16 17 <body> 18 <img src="#" alt="sb" style="float:left;border:2px solid red;display:block"/> 19 <img src="" style="border:2px solid green;display:block"/> 20 <div style="float:left;border:2px solid red;display:block">1</div> 21 <div style="border:2px solid green;display:block">2</div> 22 </body> 23 24 </html>
img不能覆盖。而且设置了display:block也是显示为行内元素的样子！！
原文：http://www.zhihu.com/question/22698326/answer/22304976
为什么设置了float的div会遮住第二个div，而当第二个div不是div而是p时却不会被遮住，而是环绕在右边？
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</script>
</head>
<body>
<div style="width:100px;height:30px;background:#333;float:left;"></div>
<div style="width:120px;height:40px;background:#ccc;"></div>
<!--
<p>文字部分</p>
-->
</body>
</html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</script>
</head>
<body>
<div style="width:100px;height:30px;background:#333;float:left;"></div>
<div style="width:120px;height:40px;background:#ccc;"></div>
<!--
<p>文字部分</p>
-->
</body>
</html>
知乎用户、林場場 赞同
同学啊，我觉得标题打错了，如果我没猜错，你应该是说“第一个div会覆盖第二个div”
先说“为什么第一个div会覆盖第二个div”
这个好理解，两个div都是块元素，不浮动的话，两个人是挨个竖着排。但是浮动元素脱离了普通流，所以呢，这个元素占据的那个文档空间就空了，地价很贵不能浪费，第二个div，这个不浮动的元素就往上走了。然后浮动元素的层级比不浮动的元素层级高，所以呢，看起来就是浮动的第一个div挡住了不浮动的第二个div。
再说“当第二个不是div而是文本时，却不覆盖，而是浮动在右边”
这个说法也不对，先纠正一下再说为什么。正确的现象描述是：当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边。
其实，你在第二个div里加点文字，和换成p加了个点文字，效果是一样的，同样表现为第一个div浮在文字左边，而且这样说不定更有利于你理解，因为第二个div的背景颜色确实被第一个div盖住了，但文字却没有。
这个怎么说呢，这个块级元素里的文字啊，那么一行一行的分别有一个行框，行框这货可以理解为父元素宽度和本行最高行高元素的高度确定的矩形。这个例子里，块级元素里面就是文字，这些文字没有标签包裹，行内框的宽度也就无从说起，所以行框就是父元素的宽度了，如果是那个p的话，就是100%了。浮动元素不占据文档空间，但是是占据行框这个空间的。所以第一个div被float:left以后，下面的元素跑上来以后，里面的文本的行框左侧是被占据了第一个div宽度那么宽的位置的，所以文本就只能待在这个浮动元素的右边了。。。
[注：行框的表述不一定准确哦，欲知详情，敬请搜索。。。]
哎，这个好难表达，不知道我说明白没有。。。
先说“为什么第一个div会覆盖第二个div”
这个好理解，两个div都是块元素，不浮动的话，两个人是挨个竖着排。但是浮动元素脱离了普通流，所以呢，这个元素占据的那个文档空间就空了，地价很贵不能浪费，第二个div，这个不浮动的元素就往上走了。然后浮动元素的层级比不浮动的元素层级高，所以呢，看起来就是浮动的第一个div挡住了不浮动的第二个div。
再说“当第二个不是div而是文本时，却不覆盖，而是浮动在右边”
这个说法也不对，先纠正一下再说为什么。正确的现象描述是：当浮动元素相邻的下一个块级元素包含文本内容时，浮动元素没有覆盖文本，而是浮动在文本的左边。
其实，你在第二个div里加点文字，和换成p加了个点文字，效果是一样的，同样表现为第一个div浮在文字左边，而且这样说不定更有利于你理解，因为第二个div的背景颜色确实被第一个div盖住了，但文字却没有。
这个怎么说呢，这个块级元素里的文字啊，那么一行一行的分别有一个行框，行框这货可以理解为父元素宽度和本行最高行高元素的高度确定的矩形。这个例子里，块级元素里面就是文字，这些文字没有标签包裹，行内框的宽度也就无从说起，所以行框就是父元素的宽度了，如果是那个p的话，就是100%了。浮动元素不占据文档空间，但是是占据行框这个空间的。所以第一个div被float:left以后，下面的元素跑上来以后，里面的文本的行框左侧是被占据了第一个div宽度那么宽的位置的，所以文本就只能待在这个浮动元素的右边了。。。
[注：行框的表述不一定准确哦，欲知详情，敬请搜索。。。]
哎，这个好难表达，不知道我说明白没有。。。
事例2）
2012-09-28 17:42
提问者采纳
前面的DIV有宽的值哦，亲
事例3）
CSS里为什么我给一个DIV加上浮动以后，下面的DIV就把它覆盖了？？？？
2013-08-19 15:57HAONANREN2002 分类：Html/Css | 浏览 1516 次 来自：手机知道
但是第三个div的字还留在原来的位置？浮动的概念我还是不太明白？一个DIV加上浮动后就不存在了吗？
2013-08-19 17:51网友采纳
如同楼下所说 浮动分为 相对和绝对。一般称为相对定位和绝对定位。
相对定位就是 float。定位结束后 记得清空浮动，下面的就不会遮盖下面的div。比如
<div>
<div style="float:left"></div>
<div style="clear:both"></div>
</div>
<div>这个不会被遮盖</div>
浙公网安备 33010602011771号