Home >Web Front-end >HTML Tutorial >What does clear in html mean?
What does clear in html mean?
- 醉折花枝作酒筹Original
- 2021-06-07 14:49:447380browse
In HTML, clear means clearing. You only need to set the "clear: attribute value" for the floating element. The clear attribute defines which sides of the element are not allowed to have floating elements. Clear space is added above the element's margins, without changing the margins themselves.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
The function of clear in css is to clear the floating effect of elements.
In CSS1 and CSS2, this is achieved by automatically adding a top margin to clear elements (i.e. elements with the clear attribute set). In CSS2.1, clear space is added above the element's upper margin, but the margin itself does not change.
No matter what kind of change, the final result is the same. If it is declared to be cleared on the left or right, the top outer border of the element will be just below the bottom margin of the floating element on that side.
clear 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.
Example:
<html>
<head>
<style type="text/css">
div {
float: left;
margin: 20px;
}
.three{
clear: both;
}
</style>
</head>
<body>
<div>
<img src="images/1.jpg" / alt="What does clear in html mean?" >
</div>
<div>
<img src="images/2.jpg" / alt="What does clear in html mean?" >
</div>
<div class="three">
<img src="images/3.jpg" / alt="What does clear in html mean?" >
</div>
</body>
</html>Effect:
Recommended learning:html video tutorial
The above is the detailed content of What does clear in html mean?. For more information, please follow other related articles on the PHP Chinese website!