The difference between the CSS float property and the Position:absolute.

1.The 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. Div is a typical block-level element that occupies a single line.

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

<Divclass= "BOXBG">        <Divclass= "Box1">Box 1</Div>        <Divclass= "Box2">Box 2</Div>        <Divclass= "Box3">Box 3</Div></Div>

CSS code:

. 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 the DIV 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;

. 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.

. 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;

. 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.

<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

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

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?

. 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

. 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.