Shulou(Shulou.com)06/03 Report--

This article is to share with you about how to remove floats in css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Css method to clear the float: 1. Add an empty div tag set to the "clear:both" style after the floating code. 2. Add an after pseudo-element that sets the "clear:both;" style to the parent element. 3. Set "overflow: auto" style to the parent element.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

When we write code, sometimes some elements on the page cannot be displayed correctly because of the use of float floating elements.

However, when using float floating elements, there are some negative effects:

(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.

At this point, you need to clear the float. Here are some ways to clear the float in css.

(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) use the overflow attribute of CSS

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:1px solid # ccc;background:#eff2f4;overflow: auto} Thank you for reading! This is the end of the article on "how 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, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.