Div + CSS basic Tutorial: Floating

Course keywords: Floating

There are two ways to layout a page:

Reference:

1) floating float

2) Positioning position

Today, I will give you a small exercise to understand the meaning of float.

Copy content to clipboard

Code:

[Example]

Requirements:

1) two squares, one red #900, one blue;

2) the width and height of the Red Square are both 200 pixels, the width of the blue square is 300 pixels, and the height is 200 pixels;

3) The upper margin (margin-top) and left margin (margin-left) of the Red Square blue are both 20 pixels;

The page effect is as follows:

Source code: sy_example 2.rar (3.58
KB)

It should be noted that although the width of the Red Square is not 100%, the blue is not in the same line as the red one, which means the block element is more "overbearing, (even if the width of a block element is not 100%, other elements are not allowed to be in the same line with it.) to eliminate this "hegemony", place the red and blue squares in one row,

In this case, we need to use float! You only need to add "float: Left;" in the CSS of the Red Square. At this time, in IE6, we can see that the blue square is indeed behind the Red Square and is in a row, however, in Firefox, the following results are displayed:

At this time, you should note that if the area above FF floats, the area behind it is likely to overlap with the area above and be misplaced.

How can we solve this problem and solve the problem of browser compatibility? It is easy to add "float: Left;" to the CSS code of the blue square. The problem is solved, add a try to see if the blue square in FF is in a line with the Red Square ~

Here, we should understand the role of float, which is a powerful tool to eliminate block element "hegemony! During page layout, it is sometimes necessary to eliminate block element hegemony before layout is good. For example, the content in the middle of kwoojan's blog is divided into left and right ), this method is used for layout, as shown in figure

As you may notice, in IE6, the distance between the Red Square and the left of the browser is not 20 pixels defined in CSS code, but 40 pixels, for example:

In fact, this is a bug in IE6 (double margin bug in IE6). This bug only appears if the following three conditions are met:

Copy content to clipboard

Code:

1) to be a block element;

2) float on the left;

3) There must be a left margin (margin-left );

It is easy to solve this bug. You only need to add "display: inline;" to the CSS tree of the corresponding block element. The Code is as follows:

Reference:

# Redblock {

Width: 200px;

Height: 200px;

Background: #900;

Margin-top: 20px;

Margin-left: 20px;

Float: left;
Display: inline;

}

Now let's see if IE6 and FF are the same ~

Well, this lesson is easy. If you have any questions, leave a message and I will explain it further.
In the next lesson, let's talk about the "clear" issue!

Final code: sy_final code .rar (587
Bytes)

The simplified code CSS is faster to load. You can see it at a Glance. ^_^

Author: kwoojan from: CSS Learning Forum