Front-end: highly adaptive floating parent container and floating parent container

Front-end: highly adaptive floating parent container and floating parent container

Float: left;

Overflow: hidden;

When all elements in a container are floating, the height of the content element does not increase with the increase of the height of the internal element, so the display of the content element exceeds the container.

When we do not set the height for the container, the height of the container is adaptive. However, when all elements in the container are floating, the height of the container is 0 due to adaptive reasons.

For your convenience, I have set the border and inner spacing for the parent container. The above four images are in the above container. After the image is set to the left floating, the height of the container is 0.

Q1: What will this affect us?

A1: When the browser parses the next container, it defaults to the next container. This will overlap the image, which is obviously bad.

So how can we solve this problem?

A1: we can set the height of the parent container.Height: 200px;

A2: we can use a lot of line breaks to support this parent container. <Br/>

The scalability of the first method is poor. Everyone knows it. After the height is fixed, it will be relatively rigid.

The second method is relatively low, and everyone understands it, and it is of little significance. (But I used to use it frequently. It's nice)

Therefore, the following method is available:

Overflow: auto; zoom: 1;

Overflow: auto; is to make the height adaptive, zoom: 1; is written to be compatible with IE6 (this style cannot pass W3C verification ).
This is the so-calledCss hackDifferent browsers, such as IE 6, IE 7, IE8, and Mozilla Firefox, have different understandings of CSS parsing, which leads to different page effects, we cannot get the page effect we need. At this time, we need to write different CSS for different browsers so that they can be compatible with different browsers at the same time, so that we can get the desired page effect in different browsers. This process of writing different CSS codes for different browsers is called CSS hack. Here, overflow: auto; zoom: 1; is the so-called css hack. This form is used to solve the incompatibility problem by using common code and some special symbols, it is meaningless, but it is implemented based on whether different browsers recognize it.

In addition, I want to add a question about the double margin of IE6. If you encounter this problem, use display: inline; (should IE6 be useless now ?)

Author: I am a storyteller.

Sina Weibo: no matter what your surname is

Weibo address: http://weibo.com/neveryu

Email: never@vip.qq.com

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.