Detailed analysis of the CSS float properties and Position:absolute of the difference _ Basic tutorial

The 1.float property defines in which direction the element floats. Historically this attribute is always applied to images, making text around the image, but in CSS, any element can float. A floating element generates a block-level box, regardless of what element it is itself. Div a typical block-level element that occupies a single row.

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

Copy Code code as follows:

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

CSS code:

Copy 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 results:

Because Div is a block-level element, the boxes are arranged in portrait format. It is often necessary to arrange the boxes horizontally in the actual operation. There are two ways to achieve this. The first kind will display:inlin-block;

Copy 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 results:

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

Copy 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 results:

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

Copy Code code as follows:

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

Execution results:

So the desired layout is achieved, and the text inside the box disappears, as well as the size of the text that 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 and can be easily achieved.

Copy 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 results:

element, this floating element touches the parent element border or another floating element border, immediately after it is displayed. For example, in the following example, when the total width of the floating element is greater than the parent element, the line is wrapped, the previous float is encountered, and then displayed

Copy 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 results:

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

Copy 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 results:

Now Box 3 is another line instead of following the box 1, (the gap between the 1,2 is not said here) This is also a use of inline-block and float, if the module width is not the same use float typesetting may result in different than expected results, Therefore, it is excellent to use float in the case of wide-height invariant, if the inconsistent words need to see the specific layout, use the appropriate attributes.

The following code, only the modified parts, the other unchanged, the structure unchanged.

What would be the result if you removed the Box3 float:left? According to understanding, floating elements do not occupy space, that is, the box 3 will disregard the frame 1, the boxes 2 directly adjacent to the border of the parent element, that is, the boxed 1 will cover the boxes 3? What about the result?

Copy Code code as follows:

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

Execution results:

Why is the text in box 3 appearing below and not covered by box 1? Then look at the code, look at the picture

Copy Code code as follows:

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

Execution results:

Do you see the difference? Yes. Box3 does not define the width; the width is not defined, and the default width is the width of the parent element, that is, when width:500px is over, the floating element overrides the floating element, which means that the 200px front of Box 3 is covered by a floating element. Why is the text not overwritten and the text is squeezed behind the 200px by the floating elements?

Floating elements do not occupy blocks of space, so box three is 100% of the parent container width 500px, but the floating element will occupy another space, that is, the row box space, popular speaking is the space occupied by the text.

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

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

Copy Code code as follows:

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

Execution results:

To here the basic floating said, that is about to say the problem, floating although easy to use, but also in the actual occurrence of 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 results:

Very common problem, under normal circumstances. The gray background will be as high as the box, but the fact is not always satisfactory:)

The cause of this situation is known to be caused by the floating, yes, is floating, many places have said floating elements will be separated from the ordinary flow, so ordinary elements can be when floating elements do not exist, so here will not open the background, but seriously see the classmate, will remember the above mentioned floating elements will not affect block box, However, it affects the row box, which is the literal or inline element, whether the block-level element or inline element is a normal stream, and why does it affect the row box if the floating element is detached from the normal stream? In fact, I don't think it's necessary to dwell on these conceptual things. In my understanding, floating elements are not in a horizontal space with block-level elements, with the text inline elements in a space, so the border here is equivalent to the background, so it does not affect the background elements, usually said to clear the float, is not to say that the float of floating elements 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't use clear:right in box 2, but you need to use clear:left in box 3;

Copy Code code as follows:

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

Execution results:

Ok! understand this, down to 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 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>
<div class= "BOXBG" >
<div class= "Box1" >
Box 1
</div>
<div class= "Box2" >
Box 2
</div>
<div class= "Box3" >
Box 3
</div>
<div class= "Clear" ></div>
</div>
</body>

Execution results:

The results were achieved and it was obvious that an empty element with equal height was added directly because the element was not floating, so it was the same as the background, so the background was stretched. In fact, the principle of clearing floating with this is the same, but also to find ways to open the background;

Copy Code code as follows:

. clear{
Clear:left;
}

Execution results:

This may not be clear, add a few words to the clearly box to try

Execution results:

Because clear uses clear:left to sum up, clear has no floating element on the left, so it must be displayed on a different line. So you can see the results on the map, in fact, with an element of the background of the distraction. Of course, there are other ways to achieve, here is mainly to speak clearly floating on the good: