61,115
社区成员
发帖
与我相关
我的任务
分享CSS浮动为什么不会遮盖同级元素
html+CSS源码：
效果如下如：
问题：
W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，原因是浮动后，元素脱离了文档流，不占据空间。为什么我对两张图中的之一进行浮动时，不会遮住另一张图呢？？？浏览器是IE8核心的360浏览器。
我的理解错在了哪里？
<html>
<head>
<style type="text/css">
img
{
border:solid 1px green;
display:block;
}
#id1{
float:left;
}
div{
border:solid 2px blue;
}
p{
border:solid 1px red;
}
</style>
</head>
<body>
<div>
<img src="/i/eg_cute.gif" />
<img id="id1" src="/i/eg_cute.gif" />
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</div>
</body>
</html>效果如下如：
问题：
W3CSchool中讲解CSS定位，浮动那一节中，明确说对框1进行向左浮动时会遮住框2，原因是浮动后，元素脱离了文档流，不占据空间。为什么我对两张图中的之一进行浮动时，不会遮住另一张图呢？？？浏览器是IE8核心的360浏览器。
我的理解错在了哪里？
...全文
请发表友善的回复…
发表回复
恋喵大鲤鱼 2016-04-25
- 打赏
- 举报
我差不多已经弄明白了，对于元素来说，这个是W3Cschool讲的不够明确，具体见我的blog：http://blog.csdn.net/k346k346/article/details/48530467
zpjshiwo77 2015-09-18
- 打赏
- 举报
并不是img和div的问题好么，你试验的肯定不对（我估计你设置的是第一个DIV是浮动的，第二个不浮动）。
hezy94 2015-09-18
- 打赏
- 举报
试了一下，img就不行，但是你要是单单是div的话，就能出现你说的那个样子，框1遮住框2
DaveLeeCN 2015-09-18
- 打赏
- 举报
会遮盖的浮动不是float，而是position:absolute;这个属性会使元素脱离文档流，相当于悬浮在页面上zpjshiwo77 2015-09-18
- 打赏
- 举报
好好理解一下吧。再给你一个地址：
http://www.w3school.com.cn/css/css_positioning_floating.asp
恋喵大鲤鱼 2015-09-17
- 打赏
- 举报
测试地址见W3CSchool，连接：http://www.w3school.com.cn/tiy/t.asp?f=csse_float
