How to use clear attribute-CSS Tutorial-php.cn

How to use clear attribute

青灯夜游

Release： 2019-02-15 14:14:45

Original

4993 people have browsed it

The clear attribute sets the elements on the left or right side of the element not to float, which can be used to clear floats and solve some problems caused by floating layouts.

How to use clear attribute

CSS clear attribute

Function: The clear attribute can set whether the elements on the left and right sides of the floating element are float.

Syntax:

clear：none | left | right | both;

Copy after login

none: Default value. Allows floated elements to appear on both sides.

left: No floating elements are allowed on the left side.

right: No floating elements are allowed on the right side.

both: Elements are not allowed to float on either the left or right side.

Example of using CSS clear attribute

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>
<h2>不使用clear清除浮动</h2>
<div class="div1">div1</div>
<div class="div2">div2 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！</div>
<p>注意，在HTML代码中，div2在div1之后。但是，由于div1向左浮动，所以div2中的文本围绕div1流动。</p>
<br><br>
<h2>使用clear清除浮动</h2>
<div class="div3">div3</div>
<div class="div4">div4 - 测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！测试文本！ </div>
<p>
说明：使用clear: left;将div4向下移动到浮动div3下面；值“Left”清除浮动到左侧的元素。我们还可以使用clear属性的“right”和“both”值。</p>
</body>
</html>

Copy after login

Rendering:

How to use clear attribute

The above is the detailed content of How to use clear attribute. For more information, please follow other related articles on the PHP Chinese website!