Home > Article > Web Front-end > Why does the following div cover the previous div? If float:left is also added to the back, it will not be covered_html/css_WEB-ITnose
Why does the following div cover the previous div? If float:left is also added to the back, it will not be covered_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:22:031343browse
float:left; HTML css div
2c1c01fe3da5b45638b932defb4b63fcacf251eef30dadcd95fda0b63932cc24
93f0f5c25f18dab9d176bd4f6de5d30e
ef0d2420b1e5291570a81009eee48a1a
#divmain{
margin:0 auto;
width:470px;
}
#div1{
float:left;
width:100px;
height:100px;
background:#006;
}
#div2{
width:100px;
height:100px;
background:#CCC;
}
531ac245ce3e4fe3d50054a55f265927
efd2567c1fb77e16e60d87a2c199ee8e
b2386ffb911b14667cb8f0f91ea547a7无标题文档6e916e0f7d1e588d4f442bf645aedb2f
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
c7d33b2f3b02b9a82806be931c7c217f
252987fa38e1d08bef975399c99efc831016b28748ea4df4d9c2150843fecfba68
862dae7f1268fe2c7b4b38addf4db2182016b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e
回复讨论(解决方案)
以后代码要用代码框编辑，要不然这样人家看也不方便。
<!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
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：What is the role of font: 0/0 a; in css_html/css_WEB-ITnoseNext article：What is the role of font: 0/0 a; in css_html/css_WEB-ITnose