CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose
- WBOY原创
- 2016-06-21 08:50:221745浏览
html+CSS源码：
<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" / alt="CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose" ><img id="id1" src="/i/eg_cute.gif" / alt="CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose" ><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浏览器。
我的理解错在了哪里？
回复讨论(解决方案)
测试地址见W3CSchool，连接：http://www.w3school.com.cn/tiy/t.asp?f=csse_float
好好理解一下吧。再给你一个地址：
http://www.w3school.com.cn/css/css_positioning_floating.asp
会遮盖的浮动不是float，而是position:absolute;这个属性会使元素脱离文档流，相当于悬浮在页面上
试了一下，img就不行，但是你要是单单是div的话，就能出现你说的那个样子，框1遮住框2
试了一下，img就不行，但是你要是单单是div的话，就能出现你说的那个样子，框1遮住框2
并不是img和div的问题好么，你试验的肯定不对（我估计你设置的是第一个DIV是浮动的，第二个不浮动）。
我差不多已经弄明白了，对于元素来说，这个是W3Cschool讲的不够明确，具体见我的blog：http://blog.csdn.net/k346k346/article/details/48530467
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn