> 웹 프론트엔드 > HTML 튜토리얼 > 为什么后面那个div覆盖前面div 如果后面也加float:left 就不覆盖了_html/css_WEB-ITnose

为什么后面那个div覆盖前面div 如果后面也加float:left 就不覆盖了_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:22:03
원래의
1358명이 탐색했습니다.

float:left; HTML css div

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




无标题文档




10

20






回复讨论(解决方案)

以后代码要用代码框编辑,要不然这样人家看也不方便。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#divmain{margin:0 auto;width:470px;background:#999;}    #div1{float:left;margin:0 auto 0 20px;width:100px;height:100px;background:#fff;/* z-index=-1;*/} #div2{width:100px;height:100px;background:#CCC;}        </style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div id="divmain">52345623546<div id="div1">10</div><div id="div2">20345345</div></div></body></html>
로그인 후 복사
로그인 후 복사

这样子看起来比较明显,因为float之后div1脱离正常流,所以浮动在其他div之上。如果你把div2也变成float那么,div1,div2就变成同样的了,div2就浮动在div1之后,详情请参见css权威指南关于float的说明。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">#divmain{margin:0 auto;width:470px;background:#999;}    #div1{float:left;margin:0 auto 0 20px;width:100px;height:100px;background:#fff;/* z-index=-1;*/} #div2{width:100px;height:100px;background:#CCC;}        </style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><body><div id="divmain">52345623546<div id="div1">10</div><div id="div2">20345345</div></div></body></html>
로그인 후 복사
로그인 후 복사

这样子看起来比较明显,因为float之后div1脱离正常流,所以浮动在其他div之上。如果你把div2也变成float那么,div1,div2就变成同样的了,div2就浮动在div1之后,详情请参见css权威指南关于float的说明。

+1

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