How to solve the height collapse problem in html

This chapter will introduce to you how to solve the problem of height collapse in HTML. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The problem of height collapse:
When the BFC of an element is turned on, the element will have the following characteristics:

1 Parent element The vertical margins will not overlap with child elements
Elements with BFC enabled will not be covered by floating elements
Elements with BFC enabled can contain floating child elements

So how to open the element BFC?
Set element float
Set element absolute positioning
Set element to inline-block

float:left; (bad) Although the parent element can be stretched, it will cause the width of the parent element Lost; and using this method causes the lower elements to move up.

display:inlink-block; The layout is ready, but the width is gone. However, it will cause width loss, so this method is not recommended.

Set the non-visible value of the element's overflow:
overflow:auto; Solve the problem of height collapse of the parent element with minimal side effects.

Compatibility

There is no BFC in IE6, but there is another implicit attribute called hasLayout.
The function of this attribute is similar to BFC, in IE6 The browser solves the problem by turning on hasLayout.

Method:
Set the zoom of the element to 1: zoom:1

In IE6, if a width is specified for an element, it will be enabled by default

hasLayout.

clear: both Clear the float of the element that has the greatest impact on it

Solution to High Collapse Solution Two

You can directly add a blank div at the end of the collapsed parent element
Since this div does not float, it can expand the height of the parent element
and then clear and float it, so that you can Using this blank div to expand the height of the parent element has basically no side effects
Although it can solve the problem, it does add redundant structure to the page.

Use the after pseudo-class to set it as a block-level element and clear the floats on both sides to solve the problem of parent class collapse
Through the after pseudo-class, select the back of box1

.box1:after{
         content:"";
         display:block;
         //清除两侧的浮动
         clear:both;
}
 /* IE6不支持伪类。  zoom:1;*/
.clearfix:after{
         /*添加一个内容*/
         content:"";
         /*转换为一个块元素*/
         display:block;
         /*清除两侧的浮动*/
         clear:both;
     }
 /*在IE6中不支持after伪类，
     所以在IE6中还需要使用hasLayout来处理*/

     .clearfix{
         zoom:1;
     }

In IE6, if the above is an inline element, it will not float

Ultimate version:

//The modified clearfix is ​​a multi-functional
/ / It can not only solve the height collapse, but also ensure that the vertical margins of the parent element
and the child element overlap

.clearfix:before,
.clearfix:after{
    content:"";
    display:table;
    clear:both;
}

The above is the detailed content of How to solve the height collapse problem in html. For more information, please follow other related articles on the PHP Chinese website!