CSS浮动为什么不会遮盖同级元素_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-21 08:50:22
원래의
1724명이 탐색했습니다.

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

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿