On the layout issue, I've forwarded an article that someone else wrote very well, I have also written a personal understanding of the article, but today I learned about the layout of the w3school of the case, but also created a question, to make clear after the want to publish here, so that more people better understand.
<body> <div id= "header" >First attach the source code, this is just a frame, tell us divided into 4 pieces of content, 4 Div, is Header,nav,section,footer, the four ID name is not random, which is named according to HTML5, because the name of the ID is best to obtain known meaning, Prevent future changes when you do not know what this div is for.
According to the rules in HTML5, the meanings of these four names are
| Header | Define a document or section header |
| Nav | To define a container for a navigation link |
| Section | Define sections in a document |
| Footer | Define a footer in a document or section |
There are many different names, and if you want to know, you can see the HTML5 reference manual.
According to the code above we know that there are 4 div, is divided into 4 pieces, we also know that on the page div as block-level elements, is in accordance with the normal flow of documents, that is, each div separate row, they will not be like inline elements as crowded together, can be understood as proud block-level elements.
Before you add a style, it works like this.
The code for the style is
<style>
#header {
background-color:black;
Color:white;
Text-align:center;
padding:5px;
}
#nav {
line-height:30px;
Background-color: #eeeeee;
height:300px;
width:100px;
Float:left;
padding:5px;
}
#section {
width:350px;
Float:left;
padding:10px;
}
#footer {
background-color:black;
Color:white;
Clear:both;
Text-align:center;
padding:5px;
}
</style>The changes after the style has been added
In addition to the change in color, the style of typesetting has also changed, thanks to float float.
In order to make the people see more clearly, I changed the color to a little clearer.
So that we can see more clearly, each div has its own area, as though each div is a rectangle, and by looking at it you can see that NAV and section are in the same row, which means they are not in the normal document stream because they should be sorted sequentially in the normal document stream.
As you can see from the CSS code, we used the NAV and section of the left to float, the footer using both sides of the elimination of floating; this is what we see, so what happens if we change some of these properties (and make sure that the other two are unchanged each time a change is made, unless specified).
1. Cancel the left float of the Nav
If we cancel the Nav left float, section and NAV will still not be in the same row, because the Float property Reference object is its previous div if the previous div is in the normal document stream, it will be aligned with the bottom of the previous Div. In this case, the section is aligned with the bottom of the nav, which is that they are still in different rows, and the effect is as follows
Because this is too long, can only separate screenshots, so there is a line of space in the middle, please ignore. The section in this diagram is set to float left, but it does not seem to play a role, because NAV is still in the document stream, and footer set the bilateral elimination, so the feeling is not working.
2. Remove the left float of section
Eliminate section of the left float, according to the principle, should be nav out of the document flow, and then the section occupies its original position, will lead to NAV and section overlap phenomenon, will be very messy it.
The results are as follows:
It turns out that we only guessed half of it, the section is really above the nav, but there is no text overlap, but the text is moved to the right, around the nav, because there is also a default left float in the text, so that the text does not overlap, there is no magic.
3. Remove footer Bilateral cancellation
In fact, footer bilateral cancellation to the left to cancel, the effect is the same, because footer is the last div, there is no right float can be canceled
We can see, footer obediently ran to the section of the right, at first glance, thought they walked, someone will not understand, also did not give footer set left float, why it will run to the top. In fact, this is all illusion, footer did not run above, because Nav and section are separated from the document flow, footer to occupy their seats, and the text from the left float, so it looks like footer ran up the same.
It's explained here today, if you have any questions, welcome to the discussion.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
