Home > Article > Web Front-end > Why did Box 2 disappear? ? ? ? _html/css_WEB-ITnose
Why did Box 2 disappear? ? ? ? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:23:221522browse
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{ margin:0px}div{ background-color:#0F9; width:200px; height:100px; } #div1{background-color:#00F;float:left;}#div2{background-color:#FF0;}</style></head><body><div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div></body></html> The display is as follows:
Reply to discussion (solution)
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>body{ margin:0px}div{ background-color:#0F9; width:200px; height:100px; position:relative; } #div1{background-color:#00F;}#div2{background-color:#FF0;}</style></head><body><div id="div1">盒子1</div><div id="div2">盒子2</div><div id="div3">盒子3</div></body></html> Yes Because 1 squeezes 2 out
#div1{background-color:#00F;float:left;} causes box 1 to float out of the text flow, so box 2 occupies the position of the original box 1, and box 1 floats It covers Box 2, but the text of Box 2 needs to wrap around Box 1, so it is squeezed below. The margin between box 3 and box 2 is: 0, so box 3 covers the extruded text of box 2. So it’s not that box 2 and box 3 overlap. Second, the text in box 2 is extruded and then covered by box 3.
You can set up border verification.
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