To solve the problems related to html and css, attach the code_html/css_WEB-ITnose

Question: This is a page layout. The current problem is that if I remove the height attribute in main, then after re-running, the blue background layout at the bottom of the page will disappear. What is the reason for this?
The code is as follows:
080b747a20f9163200dd0a7d304ba388
#header{width: 1300px;height: 180px;background-color: red;}
#main{width: 1300px;height: 600px;background-color: green;}
#footer{width: 1300px;height: 180px;background-color: blue;}
#sleft{width: 900px;height: 600px;background- color: yellow;float: left;}
#sright{width: 400px;height: 600px;background-color: pink;float: right;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
ada442393f9f941237cb0e496c17b0f516b28748ea4df4d9c2150843fecfba68
243a8f3f087936dc3f96e2f0cf018c22

4487de0046ab2f0ec18dc9c20e4ef4fa16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

Reply to discussion (solution)

f7911308d3d96f3fa9932daf4a605e0a
#header{width: 1300px;height: 180px;background-color: red;}
#main{width: 1300px;background-color: green;overflow:hidden;}
#footer{width: 1300px;height: 180px;background-color: blue;}
#sleft{width: 900px;height: 600px;background-color: yellow;float: left;}
#sright{width : 400px;height: 600px;background-color: pink;float: right;}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
4cabd540ebb9eaa6bf87adbfaf6b6ea116b28748ea4df4d9c2150843fecfba68
243a8f3f087936dc3f96e2f0cf018c22
306bf319bec3d98272eb91d1ab9b7cd916b28748ea4df4d9c2150843fecfba68
3f95e0fedfe671c2d99dd71435fcd9cf16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
171c8477c82d74a9b2eea84eaab9316716b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

#main{width: 1300px;background-color: green;overflow:hidden;}
Add overflow:hidden here

#footer {
width: 1300px;
clear: both;
height: 180px;
background-color: #00F;
}
plus clear: both; clear float

Already given on the 3rd floor Correct answer

The float attribute will cause the element to remove the normal document flow, that is, the browser will treat this element as if it does not exist when drawing other elements.
Think about it, what would happen if the elements in main no longer exist, and main has no height? The footer will move up!

Then the browser draws additional float elements, so that the footer is obscured by these two elements!

In addition:
Absolute and fixed positioning methods will also cause elements to move out of the normal document flow

3? Not quite right?
??The float should be cleared at the end of main

#main:after{content: "";display: block;float: none !important;clear: both;height: 0;}

Why is it OK to add overflow:hidden; in main? I still don’t know the reason.

Any attribute that can trigger the DIV’s hasLayout to return to the layout flow can solve this problem, such as setting its display: inline-block;

Why does this happen? Question, can anyone tell me?

http://beyondweb.cn/article_detail.php?id=437

Got it, thank you 10th floor, slwsss points will be given to you

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