Home > Article > Web Front-end > How to clear float in css

How to clear float in css

coldplay.xixiOriginal: 2021-04-16 15:27:163264browse

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:

How to clear float in css

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!

Statement：

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

Previous article：How to set css font sizeNext article：How to set css font size

See more

How to clear float in css

Related articles