How to implement floating element line wrapping in css

This article introduces to you how to implement floating element line wrapping in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

When you want to create this layout effect

The content in the purple box is like that

It is a list

The li element is a block-level element. The default size is the width of the parent element ul and the line breaks

If li has no background Then don't worry about it

But the problem is that it not only has a background but also has an adaptive width and height based on the text

This is the function of the inline-block type

So If you want li to be inline-block, set float to make invisible changes

But if it floats, it will not wrap.

The problem is here again

It's okay. Give li folat:left and then Just clear the float in clear:both

There are four properties in total to clear the float

clear:both|left|right|none;

I tested it all

First, set the right clear:right on box1 to achieve the purpose of not being in the same row

##Hmm Why didn’t you achieve the desired effect? ?

Then let’s set the second element box2 to clear:left; and see the result

##Well, box1 and box2 are not in the same row and the purpose has been achieved

Then why does it not work for box1 to set clear:right?

Because box1 can only change its position so that there is nothing on the right. Floating elements

Just like in life you can't change others but you can change yourself

But even if box1 changes its position, box2 will still follow box1 because the floating elements are out of the document The elements that flow

and are out of the document flow should be found because the elements become a special inline-block type

which has width and height and does not wrap. The combination of inline and block features is very good Awesome

here box1 Even if the right float is cleared, box2 will still follow it. The final result box1 box2 box3 is still on one line

ps. Maybe you will want box1 to run to the next line and let box2 box3 not move. Okay, that doesn’t work. Clear the floats. It’s not float:none. They are all floats. In html

, box1, box2, and box3 are created sequentially. Why are you in front of me? Do you think you are positioning? ? Blind TM run

But box2 clears the left float and changes the line by changing its position

The order is still the same box1 box2 box 3

box3 follows box2, which verifies what was said before

Through this understanding, I have a deep understanding of floating

So you set all the elements that need to be wrapped to clear:both

There is no problem at all

The left side doesn’t work, the right side doesn’t work either, then rely on the next element

Related article recommendations:

What is floating? The principle of css clearing floating

The above is the detailed content of How to implement floating element line wrapping in css. For more information, please follow other related articles on the PHP Chinese website!