CSS layout: the Float layout process and the conventional three-column layout

For the original article, see the main blog site. You are welcome to comment.

Using CSS to layout webpages is the basic skill of the front-end. What two-column layout and three-column layout are also the basic questions for front-end interviews. In general, CSS can be used.positionAttribute layout, or use CSSfloatAttribute layout. The former is suitable for layout of the home page, because the content on the home page can be fully controlled. The latter is suitable for layout templates, and you cannot control the content filled in the templates-for example, you certainly cannot consider the length of each blog post when editing the wordpress template. This blog post summarizes how to usefloatAttribute layout. In fact, there are a lot of articles on this topic on the Internet, but I don't think I have mentioned it. Let's talk about CSS Float layout.

DIV features

Basic HTML elements of the layoutdiv, There are several features that will affect the subsequent layout. Note that the following features only apply to unspecifiedwidthAttributes andheightAttributedivBecause it is in usefloatDuring the layout process, we only do this at a specific location (which will be detailed later.

• EmptydivThere is no height.
• Content-baseddivIts height depends on the content height.
• If nofloatAttribute,divAnd the width of the parent element (whether empty or not ).
• IffloatAttribute,divThe width of will depend on the width of the internal element (So, nulldivSpecifiedfloatThere is neither height nor width after the attribute ).

Many tutorials on the Internet are often specifieddivWidth or height, and then explainfloatAttribute, which is indeed a huge disturbance to my learning layout. Remember, only at a specific location will we specifydiv.

Float Layout Process

In practice, I learned that,divRendering is performed in the order in the HTML document.That is to say, let's determine the firstdivOn the page, and then decide the nextdiv.This may be obvious, but it is indeed the key to understanding the Float layout, which is rarely mentioned in other online tutorials.

The following HTML document is available:

Here is the title sidebar. Here is the footer of some text that is not followed by a large text segment.

5 In totaldivTo make thesedivWith height and width, some text is added to it. NofloatAttribute, so eachdivThe width of the entire parent element is filled, and the height is determined by the content. The rendering effect is as follows:

When an element hasfloatWhat will the browser do? I think:

Trydiv#sidebarSetfloat:leftAttribute:

{:;    }

The Sidebar is not moved to the title bar, even if there is no text on the right of the title bar. This is because the title bar is rendered before the sidebar. After the browser renders the title bar, it has forgotten whether there is any content on the right of the title bar. Therefore, it is not risky to overwrite the original content to move the sidebar to the title bar. Next, how to render the Document Stream or how to render it, except that the text bypasses the floating element, as if the floating element does not exist.

We want sidebar 2 to be on the left side of the page, and sidebar 1 to the right side of the page. The width must be limited because there are many content in sidebar 2. In order to be beautiful, set the width of 1 at the same time, and assign 2 to the sidebarfloatAttribute.

{:;:;    }{:;:;    }

 

It looks a little like a three-column layout. However, we usually do not want to extend the content below the sidebar when it is higher than the sidebar. In this case, the common technique is to includemarginAttribute. The left and right values are the values in the two sidebar.

{:;:;    }{:;:;    }{:;:;    }

Good. A three-column layout is complete. Although it looks good, what if the height of the middle column is smaller than the sidebar? Delete most of the content in the column, and then:

Hell, the footer goes up ...... This is not what I want. Another trick is to use it in the footer.clearAttribute. This attribute does not allow floating elements to appear on the left or right side of the Document Stream during the layout of elements. If any, rendering is performed below the floating element. Add the footerclearAttribute.

{:;:;    }{:;:;    }{:;:;    }{:;    }

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

Finally, let's look at an example. This example will explain two problems:

Restore the content in the middle column and rewrite the CSS Code as follows:

{:;:;    }{:;:;    }

This figure clearly shows that floating elements are not in the document flow. First, the browser page does not have a 500 pixel width, so sidebar 2 cannot be rendered on the top (the presence of Sidebar 1 makes the space insufficient). At this time, the document flow only goes to the title bar. Therefore, the middle column starts rendering at the bottom of the title bar. In order to bypass the two sidebar, I had to write a few words in the upper left corner and then render it to the right of Sidebar 2, the last step is to stretch out normally (as you can imagine, there is no text red behind the green and blue lines ).