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

This article introduces the relevant knowledge of "how to solve the problem of high collapse when the height and width of the parent element is not set". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations! I hope you can read it carefully and be able to achieve something!

If the parent element contains only a floating element, and the parent element does not set the height and width. Then its height collapses to zero, the so-called "height collapse". If the parent element contains a background or border, then the overflow element is not like part of the parent element. Solving the problem of "high collapse" is simple:

1. Floating parent element

If you let the parent element float, the height of the parent element expands until it fully contains the floating element in it, which is strange but effective. If you choose this method, be sure to add a clear:both to the next element of the element to ensure that the floating element falls below the parent element.

two。 Using overflow:hidden,zoom:1

The code is as follows:

{

Overflow:hidden

Zoom:1

}

The overflow:hidden attribute is also a strange feature in css, which forces the parent element to be expanded to include floating elements, and zoom:1 only triggers the hasLayout mode of ie6 and does not affect other browsers.

3. Use "simple cleanup"

The code is as follows:

.clearfix {

Zoom:1

}

.clearfix: after {

Content:''

Display:block

Height:0

Font-size:0

Clear:both

Overflow:hidden

}

Among them, zoom:1 is only compatible with ie6,:after. Ie6,:after is a pseudo-class in css, and ie6 and the following versions are not compatible. This method can be said to be the best comprehensive method, will not affect any other style, strong versatility, wide coverage.

This is the end of the content of "how to solve the problem of height collapse when the height and width of the parent element is not set". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.