Div + CSS tutorial -- absolute positioning and floating of divcss Layout

In CSS, there are two ways to achieve column layout. The first method is to use the absolute positioning (absolute positioning) in the four CSS positioning options (absolute, static, relative, and fixed ), it can remove an element from the document from its original location and reposition it above any expected location. The second is to use the float concept in CSS.

Absolute positioning or floating can be used to achieve the partition effect. They can be used independently or together to complement each other.

I. Absolute Positioning

The advantage of absolute positioning is that we can precisely control the location of any element at all-there is no need for speculation or luck. Because the absolute positioning element is completely removed from the regular document stream without leaving traces, it will not have any impact on other elements.
Let's try to find out how to implement the following layout.

This is a three-column layout and is centered. Column A is the subject content bar, and column B and column C are both sidebar columns. First, we cannot directly use absolute positioning to center the columns A, B, and C, because the resolution of each person's display is different, if the center effect is located on a 1024x768 resolution display, the center effect is certainly not displayed on the display of other resolutions. How can this problem be solved?
Fortunately, there is an extremely useful feature in the absolute positioning model, that is, if the container of an absolute positioning element is also located, the top and left values specified by this element are not calculated based on the document's root element HTML (that is, the upper left corner of the browser window), but the offset is calculated based on the upper left corner of the container. In other words, the container that has been located will assume the role of all the elements in it as the absolute starting point.
Therefore, using this feature, we add a container D to the external side of column A, column B, and column C, such:

Then, let us center the container D and add a property: Position: relative. In this way, we will use absolute positioning to locate the top and left values of A, B, and C, the positions of A, B, and C are calculated based on the positions in the upper left corner of container D, so that we can center the expected three columns.
However, our commonly used layout is not that simple. Apart from the three columns, we also need a page header and a footer, such:

 

At this time, it will not work if you use the absolute positioning layout, because the absolute positioning elements will be completely removed from the document stream. At this time, the footer will be placed next to the page header and displayed below the page header.
If we must use absolute positioning, we must first know the height of each column in the three columns, and then locate the footer based on the highest column. If the length of the text in any column is uncertain, in addition to using JavaScript, we can only give up the idea of absolute positioning and turn to the embrace of floating layout.

Ii. Floating

Floating is intended to insertArticleIn the left or right of the image, so that the text below the image is automatically surrounded by it, so that the left or right of the image will not show a large block of white.
Although the floating syntax is simple, it is not easy to grasp. Let's illustrate how to use floating for layout. Similarly, we need to implement a three-column layout with a footer. For example:

 

How can we use floating to achieve this effect? It is actually very simple:
1. Set the width of E to center E.
2. Set the width of A, B, and C, and move A, B, and C to the left.
3. Set the clear attribute for the footer
It should be noted that the floating layout still follows the regular Document Stream, so the position of element declaration in the HTML source file is particularly important compared with absolute positioning. Of course, the simplest way to solve this problem is to swap the Declaration Order of the left and right columns in the source files. You can also achieve the same layout without switching the order of each column, however, this requires an obscure method to use the negative margin value. Generally, people may choose to switch the Declaration Order in the left column of the source file.