When using DIV+CSS to create web pages, multiple DIVs are often arranged side by side, often using float: left or float: right. As a result, problems arise after use. When the total width of multiple DIVs in parallel on the left is less than 100%, the lower DIVs are likely to be arranged on the right side of the parallel DIVs, in the same line as the parallel DIVs in the previous line, which is not the desired result. This problem can be solved by using the Clear attribute. Please refer to the help below:
Definition and Usage
The clear attribute specifies which side of the element does not allow other floating elements.
explain
The clear attribute defines which side of the element does not allow floating elements. In CSS1 and CSS2, this is achieved by automatically adding the upper margin to the cleared element (that is, the element with the clear attribute set). In CSS2.1, the clearing space will be increased above the outer margin of the element, and the outer margin itself will not change. No matter what kind of change, the final result is the same. If the declaration is left or right clear, the upper and outer border boundary of the element will be just below the lower outer margin boundary of the floating element on the edge.
Default value: | none |
---|
Inheritance: | no |
---|
edition: | CSS1 |
---|
JavaScript syntax: | object .style.clear="left" |
---|
All mainstream browsers support the clear attribute.
notes: No version of Internet Explorer (including IE8) supports the attribute value "inherit".
Possible values
value | describe |
---|
left | Floating elements are not allowed on the left. |
right | Floating elements are not allowed on the right. |
both | Floating elements are not allowed on either side. |
none | Default value. Allow floating elements to appear on both sides. |
inherit | Specifies that the value of the clear attribute should be inherited from the parent element. |
give an example
<style type="text/css">
.LeftText { margin: 3px; float: left; height: 180px; width: 170px; border: 1px solid #B1D1CE; background-color: #F3F3F3; }
.FootText { height: 180px; }
.Clear { clear:both; }
</style>
<div class="LeftText">Block 1</div>
<div class="LeftText">Block 2</div>
<div class="Clear"></div>
<div class="FootText">Block 3</div>
Code description:
If there is no Clear layer, "Block 3" will be placed in the same line next to Block 2.
After the Clear layer is added, the impact of the floating DIV above will be cleared so that it will not affect the layout of the following DIVs