CSS float layout process with commonplace three-column layout

This article summarizes how to use the Float property in CSS layout, there are many articles on the Internet to discuss this topic, but I do not think that the point. Well, let's just make it a cliché. css Float layout

Using CSS layout page, that is the front-end of the basic skills, what two columns layout, three-column layout, that is the basic problem of the front-end interview. In general, you can use the Cssposition property to lay out or use the Cssfloat property layout. The former is suitable for the layout of the homepage, because the content on the home page can be completely controlled. The latter is suitable for layout templates, and the content you fill in the template is beyond your control-for example, when editing a WordPress template, you can't think about the length of each blog post. This blog post, is to summarize how to use the Float property in CSS layout, actually there are many articles on the Internet to discuss this topic, but I do not think that the point. Let's go over the cliché once, the float layout of CSS.

Features of P

The layout of the basic HTML element p, with so many features, will affect the layout behind. Note that the following feature applies only to P without specifying the width property and height property, because we do this only at a specific location (as detailed later) in the process of layout with float.

• Empty p is not high.
• The content of P is highly dependent on the height of the content.
• If you do not specify the float property, the width of p and the width of the parent element (whether it is empty or not) is filled.
• If the float property is specified, the width of p depends on the width of the inner element (so the empty p specifies the float property with neither height nor width).
A lot of tutorials on the web, often specifying the width or height of p, and then explaining the float property, which has really caused a lot of interference in my learning layout. Remember that we specify the width of P only in a specific location.

The process of float layout

In practice, I realized that p is rendered in the order of the HTML document. That is, we first determine the position of the previous P on the page, and then decide the position of the last p. This may be obvious, but it is really the key to understanding the float layout, which is rarely mentioned in other tutorials on the web.

There are HTML documents like the following

The code is as follows:

<!        doctype> 
Altogether 5 p, in order to make these p have a height and width, added some text to it. There is no float property at this time, so each p is full of the width of the parent element, and the height is determined by its contents. The rendering effect is as follows:



What does the browser do when an element has a float property? I think so:

1. The Shading browser detects that this element has the Float:right attribute,
2. Limits the width of p according to its content (rather than trying to fill the width of the parent element)
3. Detach the document stream and select such a location for rendering:
1. First, the document flow does not occupy the area, otherwise it is possible to overwrite the already rendered document.
2. Second, there is no other float element.
3. Finally, the document flow will not be affected after rendering. The document flow is how to walk, but the contents of the document will automatically bypass the float element.
Try setting the P#sidebar Float:left property:

The code is as follows:

#sidebar {        float:right;    }

The sidebar does not float to the title bar, even if there is no text on the right side of the title bar. This is because the title bar of the rendering in front of the sidebar, the browser after rendering the title bar has forgotten that there is no content on the right side of the title bar, so you can not risk covering the original content of the side bar floating to the title bar. Next, the document flow is how to render or how to render, in addition to the text around the floating element, as if the floating element does not exist.

We want sidebar 2 on the left side of the page, sidebar 1 on the right side of the page. Because the sidebar 2 has a lot of content, you need to limit the width. For aesthetic purposes, limit the width to 1, and assign the float property to the side bar 2.

The code is as follows:

#sidebar {        float:right;        width:100px;    }    #sidebar2 {        float:left;        width:180px;    }

Sort of like a three-column layout. However, we do not usually want the middle column to extend below the sidebar when it is above the sidebar. The usual technique is to give a margin attribute to the middle column, and the left and right values are the values of the two sidebar.

The code is as follows:

#sidebar {        float:right;        width:100px;    }    #sidebar2 {        float:left;        width:160px;    }    #content {        margin-left:160px;        margin-right:100px;    }

Well, a three-column layout is done. It looks good, but what if the height of the middle column is smaller than the sidebar? Delete Most of the contents of the column and then:



Heck, the footer's up. That's not what I was hoping for. Then there is a trick, which is to use the clear property in the footer. The function of this property is to make the elements in the document flow in the layout, not allow floating elements on the left or right. If so, renders underneath the floating element. Here, add the clear property to the footer.

The code is as follows:

#sidebar {        float:right;        width:100px;    }    #sidebar2 {        float:left;        width:160px;    }    #content {        margin-left:160px;        margin-right:100px;    }    #footer {        clear:both;    }

The footer is also normal so that a three-column layout is finally complete.

Finally, let's look at one more example, which will explain two things:

1. When the rendered area is removed from the existing floating element, and the remaining area is not top enough to accommodate the floating element, the floating element discards the rendering at the top and renders below the floating element in front.
2. In the above case, two floating elements are still not in the document flow, which may produce some strange phenomena.
Restore the contents of the column and rewrite the CSS code as follows:

The code is as follows:

#sidebar {        float:right;        width:200px;    }    #sidebar2 {        float:left;        width:300px;    }

This diagram clearly shows that the floating element is not in the flow of the document. First of all, the browser page is not 500 pixels wide, so the sidebar 2 cannot be rendered at the top (side bar 1 is not enough space), then the document flow only to the title bar. So in the column from the bottom of the title bar to render, in order to bypass the two sidebar, had to first write a few words in the upper left corner, and then to the side bar 2 right to suppress flexion to render, the last normal stretch (you can imagine, green and blue behind, in fact, there is no text of the red).
More CSS float layout process and the commonplace three-column layout related articles please follow topic.alibabacloud.com!

