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

In this article, the editor introduces in detail "what are the methods of CSS high collapse", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what are the methods of CSS high collapse" can help you solve your doubts? let's follow the editor's way of thinking to learn new knowledge.

The trigger condition of height collapse: after the parent element does not set the height, and all the child elements are floating, because the child element is not occupied, the height of the parent element is 0, which will affect the subsequent tags and the page layout.

1. Parent div defines height

.div1 {background:#000080;border:1px solid red;/* resolution code * / height:200px;}

.div2 {background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

Left

Right

Div2

Principle: the parent div manually defines the height, which solves the problem that the parent div can not automatically obtain the height.

Advantages: simple, less code, easy to master

Disadvantages: only suitable for highly fixed layout, to give a precise height, if the height is not the same as the parent div, it will cause problems

Recommendation: not recommended, only recommended for highly fixed layouts

two。 Add an empty div tag clear:both at the end

.div1 {background:#000080;border:1px solid red}

.div2 {background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

/ * clear floating code * /

.clearfloat {clear:both;height:0;overflow:hidden;}

Left

Right

Div2

Principle: add an empty div, use the clear:both enhanced by css to clear the float, so that the parent div can automatically obtain the height

Advantages: simple, less code, good browser support, not prone to strange problems

Disadvantages: many beginners do not understand the principle; if there are many floating layouts on the page, it is necessary to add a lot of empty div, which makes people feel very bad

Recommendation: it is not recommended, but this method was previously mainly used to clear floats.

3. Parent div defines pseudo objects: after and zoom

.div1 {background:#000080;border:1px solid red;}

.div2 {background:#800080;border:1px solid red;height:100px;margin-top:10px}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

/ * clear floating code * /

.clearfloat: after {display:block;clear:both;content: "; visibility:hidden;height:0;overflow:hidden;}

.clearfloat {zoom:1}

Left

Right

Div2

Principle: only supported by IE8 and non-IE browsers: after, the principle and method 2 are somewhat similar, zoom (IE to attribute) can solve the ie6,ie7 floating problem.

Advantages: good browser support, not prone to strange problems (at present: large websites are used, such as: Tencent, NetEase, Sina, etc.)

Disadvantages: a lot of code, many beginners do not understand the principle, it is necessary to use two sentences of code in order to support mainstream browsers.

Recommendation: recommended use, it is recommended to define public classes to reduce CSS code.

4. Parent div defines overflow:hidden

.div1 {background:#000080;border:1px solid red;/* resolution code * / width:98%;overflow:hidden}

.div2 {background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

Left

Right

Div2

Principle: width or zoom:1 must be defined, but height cannot be defined. When using overflow:hidden, the browser automatically checks the height of the floating area.

Advantages: simple, less code, good browser support

Cons: cannot be used with position because oversized ones are hidden.

Suggestion: it is recommended only for friends who do not use position or who have a deep understanding of overflow:hidden.

5. Parent div defines overflow:auto

.div1 {background:#000080;border:1px solid red;/* resolution code * / width:98%;overflow:auto}

.div2 {background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

Left

Right

Div2

Principle: width or zoom:1 must be defined, but height cannot be defined. When using overflow:auto, the browser automatically checks the height of the floating area.

Advantages: simple, less code, good browser support

Cons: a scroll bar appears when the internal width and height exceeds the parent div.

Advice: it is not recommended. Use it if you need to display a scroll bar or make sure your code does not appear.

6. The parent div also floats together

.div1 {background:#000080;border:1px solid red;/* resolution code * / width:98%;margin-bottom:10px;float:left}

.div2 {background:#800080;border:1px solid red;height:100px;width:98%;/* resolution code * / clear:both}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

Left

Right

Div2

Principle: all the code floats together and becomes a whole

Advantages: no advantages

Disadvantages: new floating problems will arise.

Suggestion: it is not recommended to use, only for understanding.

7. Parent div defines display:table

.div1 {background:#000080;border:1px solid red;/* resolution code * / width:98%;display:table;margin-bottom:10px;}

.div2 {background:#800080;border:1px solid red;height:100px;width:98%;}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

Left

Right

Div2

Principle: turn the div property into a table

Advantages: no advantages

Disadvantages: new unknown problems will arise.

Suggestion: it is not recommended to use, only for understanding.

8. Add the br tag clear:both at the end

.div1 {background:#000080;border:1px solid red;margin-bottom:10px;zoom:1}

.div2 {background:#800080;border:1px solid red;height:100px}

.left {float:left;width:20%;height:200px;background:#DDD}

.right {float:right;width:30%;height:80px;background:#DDD}

.clearfloat {clear:both}

Left

Right

Div2

Principle: the parent div defines zoom:1 to solve the IE floating problem, with the br tag clear:both at the end

Suggestion: it is not recommended to use, only for understanding.

After reading this, the article "what are the methods of CSS high collapse" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

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.