Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "what are the ways of clearing floats in css3". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "what are the ways to clear floats in css3" can help you solve the problem.

Way: 1, set the "clear:both" style in an empty div tag to clear the float; 2, add a ": after" pseudo element to the parent element, clear the float by clearing the pseudo element float; 3, set the overflow style for the parent element, and the attribute value is not visible can clear the float.

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

What are several ways for css3 to clear floats?

Float controls the floater to move left and right until it encounters another floater or a containment box at its outer edge. The floater does not belong to the normal flow in the document stream, and when the element floats, it does not affect the layout of block-level elements, only the layout of inline elements.

At this point, the normal flow in the document stream behaves as if the floater does not have the same layout pattern. When the height of the containing box is less than that of the floating box, a "high collapse" occurs:

The height of the parent element in the image above is the effect of padding, and the parent element does not set the height.

If the height of the parent element is not set:

If the child element in the parent element does not set a float, then the height of the parent element will be automatically stretched out, resulting in a height value.

If the child element in the parent element is set to float, then the height of the parent element will not be automatically stretched, and there will be no height value.

Obviously, there are some problems after setting the float in this way, such as:

The margin of the parent element is affected and cannot be centered from top to bottom.

If the height of the parent element is not set and the height of the parent element is not stretched after the float, the parent element will not be displayed on the display screen.

How does css clear floats? What are several ways to clear floats?

(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 the pseudo element: after to clear the float

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} about "what are the ways in which css3 removes floats"? thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.