首页 > web前端 > 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
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板