How to implement CSS sibling element float
This article mainly explains "how to realize CSS peer element floating". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "how to realize CSS peer element floating"!
1. peer float
(1) Make block-level elements appear on the same line (float everything you want to appear on the same line)
box1box2box3.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
.box1{ border: 2px solid red; width: 40px; height:100px; float:left;}
3. When no width or height is set, width and height are expanded by content;
hello.box1{ border: 2px solid red; float:left;}
4. If you add a float to an element, it falls out of the standard document flow (document flow is where the object occupies the document) and overlies it backwards looking for elements that do not float (float backwards), regardless of the previous element.
.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 floats, it leaves the standard flow and floats in the direction of the float until it stops at the boundary of the previous floating element, or falls because the previous layer cannot drop the element, in the next row;
.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 above an element B that is not floating, it squeezes out the contents of B in their original position, or even squeezes them out.
box1box2box3.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, note that if an element floats, only look at the element in front of it, and the previous element also floats, it will be displayed side by side. If the previous element does not float, the relative position will remain unchanged.
At this point, I believe that everyone has a deeper understanding of "how to realize CSS peer element floating", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!
