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

This article introduces the relevant knowledge of "how to solve the adaptive height of parent div objects in CSS". In the operation of actual cases, many people will encounter such a dilemma, so 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!

Solve the problem that the child object floats with css float while the parent div cannot adapt to the height and cannot be supported by the parent content. The parent div has no high resolution.

The outermost parent DIV cannot adapt to the height-it cannot be extended with the object without height.

When the box inside the object uses float, the object itself cannot be stretched to an adaptive height, which is due to floating.

1. First, let's take a look at the HTML source code:

Parent div is not adaptive height instance. {width:500px; border:1px solid # 000; padding:10px}.-lf {float:left; width:220px; height:100px; background:#000}.-rt {float:right; width:230px; height:100px; background:#06F}

2. Screenshot of problem effect:

After the child object uses float, the parent div cannot adaptively take screenshots of the high instance.

Method 1: set a fixed height to the parent-TOP

This method can be used to determine the height of child objects within the parent div.

If the above case, we know that the internal div height 100px, then the parent set css height to 100px to see the effect.

1. Complete div+css instance html code (add height to the parent div):

The parent div is not adaptive to the highly instantiated instance. {width:500px;border:1px solid # 000 × paddingheight:100px 10px; height:100px}.-lf {float:left; width:220px; height:100px; background:#000}.-rt {float:right; width:230px; height:100px; background:#06F}

2. Add height to solve the problem that you can't support sub-objects and use float effect to take screenshots.

Solve the adaptive height screenshot of outer parent div by adding height 100px to parent

The disadvantage of this method is that the parent is a fixed height and does not adapt to the height of the content and has no height. This method is used when the height of the content within the parent div can be determined.

Method 2: use css clear to clear floating-TOP

Add a clear to clear the floating object before closing the parent div tag.

1. Add the complete div css code of clear effect

The parent div is not adaptable to the height instance. {width:500px;border:1px solid # 000 leading padding lf 10px}.-lf {float:left; width:220px; height:100px; background:#000}.-rt {float:right; width:230px; height:100px; background:#06F} .clear {clear:both}

2. Add css clear to solve the problem that the parent div cannot adapt to the height.

Use clear:both to clear child objects within the parent to create floats

This method needs to pay attention to the position where clear:both is added, not to add clear style directly to the parent, but to add a clear object box before the parent.

Method 3: add overflow style to the parent style-TOP

This method is very simple, and can also be used as a recommended method to solve the problem that the parent cannot be stretched to an adaptive height. Instead of adding a div box object, you only need to add an overflow:hidden style to the parent.

1. Complete css div code

The parent div is not adaptive to the highly instantiated instance. {width:500px;border:1px solid # 000 × paddingoverflow:hidden 10px; overflow:hidden}.-lf {float:left; width:220px; height:100px; background:#000}.-rt {float:right; width:230px; height:100px; background:#06F}

2. Add css overflow to take screenshots.

Parent div plus overflow style solves parent adaptive height

Recommend. This method is very simple to solve the child float, the parent div can not adapt to the height, can not adapt to the height of the parent content without height.

This is the end of "how to solve the adaptive height of parent div objects in CSS". 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.