An analysis of absolute positioning (absolute) and floating positioning (float)

This article mainly introduces the absolute positioning (absolute) and floating positioning (float) analysis, has a certain reference value, now share to everyone, the need for friends can refer to

Absolute positioning or floating can be used to achieve the effect of columns. Both can be used independently, or can be combined to complement each other.

There are two ways to implement a column layout in CSS. The first approach is to use absolute positioning (absolute positioning) in four CSS positioning options (absolute, static, relative, and fixed), which removes an element from its original position in the document. and reposition it on any desired location. The second is to use the floating (float) concept in CSS.

Absolute positioning or floating can be used to achieve the effect of columns. Both can be used independently, or can be combined to complement each other.

1. Absolute positioning

The advantage of absolute positioning is that we can precisely control the position of any element in tittle-there is nothing to guess or luck. Because an element with absolute positioning applied is completely removed from the regular document stream without leaving traces, it does not have any effect on other elements.

So let's try an absolute positioning how to implement the following layout.

This is a three-column layout and is centered. Where the column A is the main content bar, and the B column and the C column are all sidebar. First of all, we can not directly with absolute positioning will be a, B, c three column to the center of the position, because everyone's display resolution is different, in the 1024x768 resolution of the display positioning on the center effect, the other resolution of the display on the monitor will certainly not be centered display, then, How to solve this problem?

Fortunately, there is an extremely useful feature in the absolute positioning model: If a container of an absolutely positioned element is also positioned, the top and left values specified by the element will not be computed based on the document's root element html (that is, the upper-right corner of the browser window). Instead, the offset is calculated based on the upper-left corner of its container. In other words, that is: the positioned container will play the role of absolutely locating the starting point for all of the elements.

So, using this feature, we add a container D to the outside of a, B, and C columns, such as:

We then center the container d and add a property to it: Position:relative, so that the top and left values of a, B, C are positioned with absolute positioning, the positions of a, B, and C are calculated based on the position of the upper-right corner of the container d. This will enable us to achieve the three-column centering effect we expect.

However, our usual layout is not so simple, except for three columns, we also need a page header and a footer, such as:

At this point, the absolute positioning of the layout will not work, because the absolutely positioned elements will be completely removed from the document flow, the footer will be next to the page header, displayed under the page header.

If we have to use absolute positioning, then we must know the height of each column in advance and then position the footer according to the highest one in the column. If the length of the text in any column cannot be determined, in addition to using JavaScript, we can only abandon the idea of absolute positioning, and then into the embrace of floating layout.

2. Floating

Floating is meant to be inserted into the story of the picture left or right floating, so that the text underneath the picture automatically around it, so that the left side of the picture or the right side will not appear a large block of white.

The floating syntax is simple, but not so easy to master, let's give an example of how to use floating for layout. Again, we're going to implement a three-column layout with a footer. Such as:

How do you use floating to achieve this effect? It's really simple:

1, set the width of E, let E center

2, set the width of a, B, C, will be a, B, c float to the left respectively

3. Set the Clear property to the footer

It is important to note that the floating layout still follows the regular document flow, so the location of the element declarations in the HTML source file is particularly significant compared to absolute positioning. Of course, the simplest way to solve this problem is to swap the declaration order of the left column and the right column in the source file, and also to implement the same layout without swapping the columns, but it will use a more obscure method of using negative margin values. In general, people will always choose to swap the declaration order of the two columns in the left-hand side of the source file.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!