Home >Web Front-end >CSS Tutorial >How to clear float in css
How to clear float in css
- coldplay.xixiOriginal
- 2021-04-16 15:27:163312browse
The way to clear floats in css is to use the clear attribute to clear floats. The clear attribute defines which side of the element is not allowed to have floating elements. The code is [img{float:left;clear:both;}].
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
How to clear floats in css:
css can use the clear attribute to clear floats. The clear attribute is introduced as follows:
The clear attribute defines which side of the element is not allowed to have floating elements. In CSS1 and CSS2, this was accomplished by automatically adding a top margin to clear elements (i.e., elements with the clear property set).
In CSS2.1, clear space will be added above the upper margin of the element, but the margin itself will not change. Regardless of the change, the end result is the same. If it is declared as clear on the left or right, the upper border of the element will be just below the bottom margin of the floating element on that side.
Attribute value:
left Floating elements are not allowed on the left.
#right Floating elements are not allowed on the right side.
Both Floating elements are not allowed on the left and right sides.
none Default value. Allows floated elements to appear on both sides.
inherit specifies that the value of the clear attribute should be inherited from the parent element.
Use the clear attribute to clear floating elements:
No floating elements are allowed on the left or right side of the image:
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" / alt="How to clear float in css" >
<img src="/i/eg_smile.gif" / alt="How to clear float in css" >
</body>
</html>Rendering:
Related tutorial recommendations: CSS video tutorial
The above is the detailed content of How to clear float in css. For more information, please follow other related articles on the PHP Chinese website!