Detailed examples of float usage in HTML/CSS

1. Basic usage examples of float

1. Let's first create two div boxes and set the height, width and background color;

The initial positions of the two boxes on the web page are as follows:

Then we float the red box to the right

Then we will find that the red box floats to the right, but the blue box moves directly up to the original position of the red box.

Then we float the blue box to the right to see the effect:

We will find that it will be arranged closely following the red box and will not be affected by the block-level elements and occupy a single line.

2. Basic rules of floating positioning

1. When the float attribute of an element is left or right, the element is floating;

2. If there is not enough space left to hold the floating box, the box moves down until there is enough space to hold the box, and then moves left or right;

3. The top edge of the floating box must not be higher than the top edge of the previous box;

4. When placing floating boxes, avoid regular flow boxes; when placing regular flow boxes, ignore floating boxes;

5. When calculating the automatic height of the regular flow box, the floating box is ignored

6. Clear float: clear:both (left or right).

Summarize

The above is a detailed example of the usage of float in HTML/CSS introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!