Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > 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

WBOY

Release： 2016-06-24 12:22:03

Original

1359 people have browsed it

float:left; HTML css div

#divmain{
margin:0 auto;
width:470px;
}
#div1{
float:left;
width:100px;
height:100px;
background:#006;
}
#div2{

width:100px;
height:100px;
background:#CCC;

}

无标题文档

回复讨论(解决方案)

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

<!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>

Copy after login

这样子看起来比较明显，因为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>

Copy after login

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

1

Related labels：

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

source：php.cn

Previous article：What is the role of font: 0/0 a; in css_html/css_WEB-ITnose Next article：Use media player to play different types of video files_html/css_WEB-ITnose

Statement of this Website

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