Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > To solve the problems related to html and css, attach the code_html/css_WEB-ITnose

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

WBOY
Release： 2016-06-24 11:55:30
Original
1044 people have browsed it

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:











Reply to discussion (solution)











#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;}
Copy after login

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

Related labels：
求解html与css的相关问题，附上代码
source：php.cn
Previous article：table controls single and double row colors and mouse hover color table light stick_html/css_WEB-ITnose Next article：CSS floating float_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
Latest Articles by Author
Latest Issues
Tried everything but still the HTML content is not showing Basically, the content of the html document won't display anything on the browser. This HT...
From 2024-04-04 19:16:15
0
1
3496
PHP query update data This is the error I get: Updated question SETsituacao='Concluido'WHEREid=?SQLSTATE[42000]:...
From 2024-04-01 13:41:23
0
1
382
TypeError: Cannot read property of undefined (read 'position') using ThreeJs I'm trying to integrate a 3D model into the background of the hero section of my website. ...
From 2024-04-01 12:01:52
0
1
416
My website displays fine on desktop but not on mobile screen I use HTML/CSS to design my personal website. But the text doesn't scale to the phone. Ple...
From 2024-03-30 15:09:41
0
1
352
Functional issues with table tr:first-child td I use CSS and tables to place the fraction line between the numerator and denominator. For...
From 2024-03-30 13:24:05
0
1
295
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template