Shulou(Shulou.com)06/02 Report--

Editor to share with you whether floating in css3 occupies a position, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Floating is the occupancy position in css3. Float floating elements can break away from the standard document flow and the restrictions of block-level and inline elements, but they are not separated from the text stream, so they still occupy the position, and the rest of the text content continues to be arranged in order.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Properties of element floats:

1. Floating elements break away from the standard document flow and get rid of the restrictions of block-level elements and inline elements.

2. Floating elements have the effect of being close to each other, and automatic line wrapping occurs when the width is not enough.

3. Although the floating element is separated from the standard document stream, it does not break away from the text stream, resulting in the effect of being surrounded by words.

Float floats are as detached from the document stream as position:absolute, but float is out of the document stream but still occupies a place, and the rest of the text continues to be arranged in order-if you set floats on all elements, you will see that the Ps do not overlap, but in order. You can refer to the effect of setting display:none and visible:hidden.

The float elements are not visible in other boxes, but the text in other boxes is visible.

Float float:

The difference between floating float and absolute. Box {width: 500px; height: 300px; border: 1px solid black; margin: 0 auto; position: relative;} .first {width: 150px; height: 100px; / * float: left;*/ display: inline-block Background: pink; border: 10px solid red; / * added borders * /} .second {width: 100px; height: 100px; background: blue; display: inline-block; float: left / * set only one float * /} .third {width: 50px; height: 100px; / * float: left;*/ display: inline-block; background: green;} 123 456 789

Change the setting of line 27 to position:absolute; as shown below

Change the setting of line 27 to position:absolute; plus left:0; as follows

Example 3. Break away from the document stream comparison

The difference between floating float and absolute. Box {width: 500px; height: 300px; border: 1px solid black; margin: 0 auto; position: relative;} .first {width: 150px; height: 100px; / * float: left;*/ display: inline-block Background: pink; border: 10px solid red; / * added border * /} .second {width: 100px; height: 100px; background: blue; display: inline-block; position: absolute; left:0; opacity: 0.8 / * float: left * /} .third {width: 50px; height: 110px; float: left; display: inline-block; background: green; / * position: absolute;*/} 123 456 789

Absolute is separated from the document stream with higher priority.

Floating parsing

Title .box {width:500px;height:500px;border: 5px solid green;} .first {width: 200px; height: 200px; border: 3px solid red; float:left; / * left float * /} .second {width: 150px; height: 100px; border: 3px solid blue } .third {width: 110px; height: 100px; border: 3px solid grey; float:left; / * left float * /} 123 456 789 I am the text

Effect picture:

In the picture

The red border of the first element-- left float

The second element has a blue border

The gray border of the third element-- left float

Note: floating means leaving the document stream, what is floating away from the document stream? As the name implies, floating is equivalent to floating elements above where there are no floating elements (just like the unfloating represents the earth, floating is like white clouds floating in the sky, and you are overlooking the earth at a higher height than white clouds. You look down, oh, that piece of land is covered by white clouds, you can only see the white clouds but not the earth, this is floating) You can see from the picture that the blue border is covered by the red border, and the weird thing is that the unfloating text goes out of the float, and you probably know that float and absolute are separated from the document stream.

When you look at this, you may wonder why the gray border of the third element is in the middle of the red box instead of above it.

Answer: the second element does not set a float, the third element floats according to the order and position of the second float, and the third element can see the effect of floating on top only when the fourth element (without floating) appears.

The difference between floating and positioning:

The float will still occupy the original position.

Positioning will deviate from the document stream and will not occupy the original position.

If all three elements are set to float, they are placed side by side in order. The problem is that the height of the parent element (without setting width and height) collapses, resulting in the border merging. The solution is to clear the float.

If the second element sets the width and height, the third element floats outside the width and height.

The original function of floating float is to achieve text wrapping effect.

The above is all the content of the article "whether floating in css3 occupies a place or not". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.