About the difference between css float attribute and position:absolute. _html/css_WEB-ITnose

1.The float attribute defines in which direction the element floats. Historically this property has always been applied to images, causing the text to wrap around the image, but in CSS, any element can be floated. A floated element creates a block-level box, regardless of what type of element it is. div is a typical block-level element that occupies a line by itself.

Let’s first look at how the most basic block-level elements are arranged. html code, the following styles are based on this.

<div class="boxBg">        <div class="box1">        框框1        </div>        <div class="box2">        框框2        </div>        <div class="box3">        框框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:

Due to div It is a block-level element, so the boxes will be arranged vertically. In actual operation, it is often necessary to arrange the frames horizontally. There are two ways to do this. The first one will 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, the essential reason is traced back to It is caused by whitespace characters between elements, so setting the size of fone-size on the parent element can adjust the size of the whitespace gap.

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

After changing font-size:34px, the gap will become wider.

Execution result:

Similarly, to remove the gap, you need to change font-size:0;

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

Execution results:

In this way, the desired layout is achieved, and the text inside the box also disappears. This also proves that the size of the text affects the gap. Just reset it in the child element. Of course that's not the focus today. The same effect float:left; can also be easily achieved.

<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 adding float to the element, the floating element will hit the parent element border or another element The border of a floating element that appears immediately behind it. For example, in the following example, when the total width of the floating element is greater than the parent element, the line breaks. When the line breaks, it encounters the previous float and displays

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

What will be the result if inline-block is used?

  <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 time, box 3 starts on a new line instead of following box 1, (1,2 The gap between them will not be discussed here) This is also a judgment of using inline-block and float. If the module width is different, using float typesetting may lead to different results from the expected results, so use float when the width and height remain unchanged. It is excellent, but if it is inconsistent, you need to look at the specific layout and use the appropriate attributes.

The code is posted below, only the modified part is posted, the rest remains unchanged, and the structure remains unchanged.

What will be the result if the float: left of box3 is removed? According to understanding, floating elements do not occupy space, that is, frame 3 will ignore frame 1, and frame 2 will be displayed directly next to the border of the parent element, that is, frame 1 will cover frame 3? What is the result?

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

Execution result:

Why does the text in box 3 appear below instead of being covered by box 1? Then look at the code and the pictures

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

Execution results:

Do you see any difference? Yes. box3 does not define width; the width is removed. Without defining the width, the default width is the width of the parent element, which means that at this time, width: 500px; the floating element covers the non-floating element, that is, the width of 200px in front of box 3 is occupied by the floating element. Covered, why is the text not covered and the text is squeezed 200px behind the floating element?

Floating elements will not occupy the space of the block, so box three is 100% of the parent container width of 500px, but floating elements will occupy other space, which is the line box space. In layman's terms It is the space occupied by the text.

This is also the reason why the text will automatically wrap around the image after it floats. Floated elements do not occupy block-level space, but will affect text and inline elements within block-level elements.

In this case, if you want the three boxes to have the same width, then you only need to change the width of the three boxes: 300px;

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

Execution result: