Summary of CSS sibling element floating analysis

float:left/right/none;

1. Same level floating

(1) Make block-level elements appear in the same line (all elements to be displayed in the same line must be floated)

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>


.box1{
	border: 2px solid red;
	width: 40px;
	height:100px;
	float:left;
}
.box2{
	border: 6px solid black;
	width:100px;
	height:40px;
	float:left;
}
.box3{
	border: 12px solid blue;
	width:100px;
	height:300px;
	float:left;
} 

(2) Make inline elements support width and height

<span class="box1"></span>
.box1{
	border: 2px solid red;
	width: 40px;
	height:100px;
	float:left;
} 

3. When width or height is not set, the width and height are extended by the content;

<span class="box1">hello</span>

.box1{
	border: 2px solid red;
	float:left;
} 

4. If you add float to an element, it will be out of the standard document flow (document flow refers to the position of the object in the document) and will look for non-floating elements to cover it (floating backwards), and it will have nothing to do with the previous elements.

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


.box1{
	border: 1px solid red;
	width: 40px;
	height:100px;
	float:left;
}
.box2{
	border: 4px solid blue;
	width: 140px;
	height:40px;
	float:left;
}
.box3{
	border: 8px solid gray;
	width: 200px;
	height:200px;
	
} 

5. If an element is floated, it will first leave the standard flow and then float according to the floating direction until it hits the boundary of the previous floating element and stops, or falls down because the previous layer cannot accommodate the element and is placed on the next line;

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>


.box1{
	border: 11px solid red;
	width: 40px;
	height:100px;
	float:right;
	
}
.box2{
	border: 4px solid blue;
	width: 140px;
	height:40px;
	float:left;
	
}
.box3{
	border: 8px solid gray;
	width: 200px;
	height:200px;
} 

6. When an element A floats on an element B that does not float, it will squeeze out the original position of B's ​​content, or even squeeze out

<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>


.box1{
	border: 11px solid red;
	width: 40px;
	height:100px;
	
	
}
.box2{
	border: 4px solid blue;
	width: 60px;
	height:100px;
	float:left;
	
}
.box3{
	border: 8px solid gray;
	width: 200px;
	height:200px;
} 

When analyzing, if an element is floating, only look at the element in front of it. If the previous element is also floating, it will be displayed side by side. If the previous element is not floating, the relative position will remain unchanged.

Detailed analysis: https://www.jb51.net/web/76691.html

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.