Heim >Web-Frontend >HTML-Tutorial >CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose
CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 08:50:221746Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：百度前端学院总结_html/css_WEB-ITnoseNächster Artikel：视口的宽高与滚动高度_html/css_WEB-ITnose