Home > Web Front-end > HTML Tutorial > About the usage of float and clear in div css style sheet_html/css_WEB-ITnose

About the usage of float and clear in div css style sheet_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:30:13
Original
1493 people have browsed it

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

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template