When most people are really confused about float and clear in div css, let me explain their usage to you. Hope it helps everyone;
1float: The so-called float means where to align it. It has three parameters, left right none, and the elected float: right means the direction of the current div. Float right. If there is a div below, it will move up to the left of the current div according to the default method of normal flow. This means that if float is used above, it is equivalent to giving up its position, and the div below will come up and be on the same line as it.
Other methods are the same.
You may have the biggest headache about clear;
Clear: Let me tell you the meaning. Some textbooks are too vague. Clear means to know the impact of the float of the above div on itself. For example, if the above div is set to float: left
, then the current div will move up to the right side of the above div and occupy all the remaining rows if clear is not set.
If clear: left or both is used in the div below, it means to clear the effect of float: left of the above div on the current div. Then the current div will not float to the right side of the above div
which means that the floating direction of the above div has no effect on itself, which is equivalent to the above div still occupying one straight row, all The div below still occupies an integrated position and will not move up on its own. But the above div will adjust its width according to its own float
. But it still occupies a whole line
The same goes for other ways.
I hope it helps you. If you have any questions, you can send me an email at 358905814@qq.com
Welcome everyone to point out my mistakes and make progress together