What is the method of clearing floats in css
This article will explain in detail what is the method of removing floats in css. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.
Consequences of floating:
(1) because the floating element is separated from the document flow, the height of the parent element cannot be stretched, affecting the elements at the same level as the parent element.
(2) non-floating elements at the same level as floating elements follow, because floating elements leave the document stream and do not occupy their original position.
(3) if the floating element is not the first floating element, the element before the element also needs to float, otherwise it will easily affect the structure of the page.
Example: set three div in a div and let three div support the parent element
.box {border:1pxsolid#ccc;background:pink;}
.red {width:100px;height:100px;background:red;}
.green {width:100px;height:100px;background:green;}
.blue {width:100px;height:100px;background:blue;}
Effect picture:
After adding float:left, the parent element cannot be supported.
Clear the method of floating
(1) use clear:both to clear floats
Put an empty div tag in the code, and then set clear:both to the tag to clear the impact of the float on the page. It has the advantages of simplicity, convenience and good compatibility, but in general, this method is not recommended because it will cause structural confusion and is not conducive to later maintenance.
(2) use pseudo element clearfix to clear floats
An after pseudo element is added to the parent element, which can prop up the height of the parent element by removing the float of the pseudo element.
.clearfix: after {
Content: ""
Display:block
Visibility:hidden
Clear:both
}
(3) the use of overflow method
When the overflow style is set for the parent element, either overflow:hidden or overflow:auto can clear the float as long as its value is not visible. Its essence is to construct a BFC, which makes it possible to prop up the height of the parent element.
.box {border:1pxsolid#ccc;background:#eff2f4;overflow:auto}
(4) the use of double pseudo element method.
The effect of clearing the float is achieved by setting double pseudo elements to the parent element.
.clearfix: before,.clearfix:after {
Content: ""
Display:block
Clear:both
}
This is the end of this article on "what is the way to remove floats in css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.
