CSS Float property and Position:absolute comparison

I believe a lot of people have this problem, in the page layout of float and position:absolute which better use it? Since it is the layout, use float good, this I more commonly used. This float can be cleared and generally does not affect the overall layout. and position, positioning, is unconstrained, this seems to be far from layout, generally if you do what special positioning or floating layer, you can consider the use. Normal page layout, I personally recommend using float

The 1.float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of its own element. P a typical block-level element that occupies a single row.

First look at how the most basic block-level elements are arranged. HTML code, the following styles are based on this.

Copy the Code code as follows:

<p class= "BOXBG" >
<p class= "Box1" >
Box 1
</p>
<p class= "Box2" >
Box 2
</p>
<p class= "Box3" >
Box 3
</p>
</p>

CSS code:

Copy the Code code as follows:

. boxbg{
margin:0 Auto;
width:500px;
height:200px;
BORDER:2PX Solid #ccc
}
. box1{
width:100px;
height:50px;
Background-color:red
}
. box2{
width:100px;
height:50px;
Background-color:blue
}
. box3{
width:100px;
height:50px;
Background-color:green
}

Execution Result:

Because P is a block-level element, the boxes are arranged in portrait form. In practice, it is often necessary to arrange the boxes horizontally. There are two ways to achieve this. The first kind will be display:inlin-block;

Copy the Code code as follows:

. boxbg{
margin:0 Auto;
width:500px;
height:200px;
BORDER:2PX Solid #ccc
}
. box1{
width:100px;
height:50px;
background-color:red;
Display:inline-block
}
. box2{
width:100px;
height:50px;
Background-color:blue;
Display:inline-block
}
. box3{
width:100px;
height:50px;
Background-color:green;
Display:inline-block
}

Execution Result:

As for the gap in the middle, traced back to the essential reason is caused by the whitespace between the elements, so in the parent element set the size of the fone-size, you can adjust the size of the blank gap.

Copy the Code code as follows:

. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;
}

After the font-size:34px, the gap will widen.

Execution Result:

Similarly, to remove the gap, then need to be font-size:0;

Copy the Code code as follows:

. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}

Execution Result:

In this way, the desired layout is realized, and the text inside the box disappears as well, proving the size of the text affects the gap. You just need to reset it in the child element. Of course, this is not the point today. The same effect is float:left; it can be easily implemented.

Copy the Code code as follows:

<style>
. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
. box1{
width:100px;
height:50px;
background-color:red;
Float:left
}
. box2{
width:100px;
height:50px;
Background-color:blue;
Float:left
}
. box3{
width:100px;
height:50px;
Background-color:green;
Float:left
}
</style>

Execution Result:

After the element is added to float, the floating element will appear after it touches the parent element border or another floating element border. For example, in the following example, when the total width of the floating element is greater than the parent element, the line breaks, the line breaks, and the previous float is encountered and is then displayed

Copy the Code code as follows:

<style>
. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
. box1{
width:100px;
height:100px;
background-color:red;
Float:left
}
. box2{
width:100px;
height:50px;
Background-color:blue;
Float:left
}
. box3{
width:400px;
height:50px;
Background-color:green;
Float:left
}
</style>

Execution Result:

If you use Inline-block, what will the result be?

Copy the Code code as follows:

<style>
. boxbg{
margin:0 Auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
. box1{
width:100px;
height:100px;
background-color:red;
Display:inline-block
}
. box2{
width:100px;
height:50px;
Background-color:blue;
Display:inline-block
}
. box3{
width:400px;
height:50px;
Background-color:green;
Display:inline-block
}
</style>

Execution Result:

At this point, the box 3 is another row instead of following the box 1, (the gap between the two is not said here) This is also a use of inline-block and float, if the module width is not the same as the use of float layout may result in different from the expected results, Therefore, it is excellent to use float in the same width and height, and if inconsistent, you need to look at the specific layout and use the appropriate properties.

The following paste code, only the modified part, the other unchanged, the structure is unchanged.

What happens if I remove the Box3 float:left? According to understanding, floating elements do not occupy space, that is, Box 3 will ignore box 1, Box 2 directly adjacent to the parent element of the border display, that is, Box 1 will cover the box 3? What about the results?

Copy the Code code as follows:

. box3{
width:100px;
height:50px;
Background-color:green;
}

Execution Result:

Why does the text in box 3 appear below instead of being overwritten by box 1? Then look at the code, look at the picture

Copy the Code code as follows:

. box3{
height:50px;
Background-color:green;
}

Execution Result:

See what's different? Yes. Box3 does not define width; The default width is the width of the parent element, which is not defined, that is, when width:500px is present, and the floating element overrides the non-floating element, that is, the width of the front 200px of Box 3 is covered by a floating element. Why does the text not be overwritten and the text is squeezed by a floating element in the 200px position?

Floating elements do not occupy the space of the block, so box three is 100% of the parent container width 500px, but the floating element will occupy another space, that is, the line box space, the popular is the text occupies space.

This is why the text automatically wraps around the picture after float. Floating elements do not occupy block-level space, but affect text within block-level elements as well as inline elements.

So if you want three box width, you just need to width:300px the box three;

Copy the Code code as follows:

. box3{
width:300px;
height:50px;
Background-color:green;
}

Execution Result:

To the basic floating here said, it is necessary to say that the problem, floating although easy to use, but also in practice there are many problems. For example:

<style>
. boxbg{
margin:0 Auto;
position:relative;
width:500px;
border:2px solid #ccc;
Background-color: #ccd;
}
. box1{
Float:left;
width:100px;
height:50px;
background-color:red;
}
. box2{
Float:left;
width:100px;
height:50px;
Background-color:blue;
}
. box3{
Float:left;
width:100px;
height:50px;
Background-color:green;
}
</style>

Execution Result:

Very common problem, under normal circumstances. Should be gray background will be as high as the box, but the facts are always not satisfactory:)

The cause of this situation, all know is because of the floating caused, yes, is floating, many places have said floating elements will be out of the ordinary flow, so the ordinary elements can be when floating element does not exist, so here will not open the background, but seriously look at the classmate, will remember the above mentioned floating elements will not affect the block box, However, it affects the line box, that is, the text or inline element, whether it is a block-level element or an inline element that belongs to a normal stream, and why does the floating element affect the row box if it is out of the ordinary stream? In fact, I don't think it's necessary to dwell on these conceptual things. According to my understanding floating element is the block level element is not a horizontal space, with the text inline elements in a space, so here the border is equivalent to the background, so it does not affect the background elements, usually said to clear the float, not to say floating element of the float property is removed, but to clear its surrounding floating elements, So that there is no floating element around itself, so if you want to make the box three to the second row, you can not use clear:right in box 2, but need to use the clear:left inside the box 3;

Copy the Code code as follows:

. box3{
Float:left;
width:100px;
height:50px;
Background-color:green;
Clear:left
}

Execution Result:

Ok! understand this, and then say how to make the background and box high, the first: the most direct way is to set the background height and the box is equal to OK, of course, this is not the focus, the following say clear floating. First look at the example:

Copy the Code code as follows:

<! Doctype>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<style>
. boxbg{
margin:0 Auto;
position:relative;
width:500px;
border:2px solid #ccc;
Background-color: #ccd;
}
. box1{
Float:left;
width:100px;
height:50px;
background-color:red;
}
. box2{
Float:left;
width:100px;
height:50px;
Background-color:blue;
}
. box3{
Float:left;
width:100px;
height:50px;
Background-color:green;
}
. clear{
width:100px;
height:50px;
}
</style>
<body>
<p class= "BOXBG" >
<p class= "Box1" >
Box 1
</p>
<p class= "Box2" >
Box 2
</p>
<p class= "Box3" >
Box 3
</p>
<p class= "Clear" ></p>
</p>
</body>

Execution Result:

The results are achieved, and it is obvious that an empty element of equal height is added directly, because the element is not floating, so it is the same as the background, so the background is open. In fact, with the principle of clear floating and this is the same, but also to open up the background; Remove the clear width, height, plus the clear property

Copy the Code code as follows:

. clear{
Clear:left;
}

Execution Result:

This may not be clear, give the clear box inside a few words to try

Execution Result:

Because clear uses clear:left to sum up, clear left cannot have a floating element, so it must be displayed on a different line. So you see the results on the graph, in fact, with an element to open the background. Of course there are other ways to achieve, here is the main point of clear floating on it:)