Home > Web Front-end > CSS Tutorial > The difference between clear:both and flat:none in css

The difference between clear:both and flat:none in css

黄舟
Release: 2017-07-24 09:57:45
Original
2026 people have browsed it

Simply put:
1.clear:both is to prevent the elements before and after the floating element from being affected by floating.
2.float:none is to prevent the child elements from inheriting the floating effect of the parent element. .

clear:both; is to prevent the floating content from affecting other tags, so the floating content must be cleared.
float:none; I have used it several times because I have already used float:left; Or float:right; but since it is a control or public style, if it is changed, it will have a greater impact, so use float:none to overwrite the original style.
I don’t know if I can understand this, it’s best to have an example.

For novices, if you use float, use clear.

.C-lr{
clear:both;
height:0px;
width:auto;
font-size:0px;
line-height:0px;
visibility:hidden; 
border:0px;
}
Copy after login


If you study further, you can avoid using clear.

float:none? Use What does it do?

The two are different, float: none; the selected element does not float; clear: both; there are no floating elements around the selected element.

In other words, clear: float; what is this? I have not seen. . .

clear has four values:

none: allows floating objects on the left and right sides;

both: does not allow floating objects on the left and right sides;

left : Floating objects are not allowed on the left;

right: Floating objects are not allowed on the right.

clear:left|right|both, clears the impact of floating, not clearing floating.

The above is the detailed content of The difference between clear:both and flat:none in css. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
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