I. What is height collapse

When the parent element does not set the height, it is supported by the child element, that is, the child element is as high as the parent element, when the child element float, the parent element will collapse in height. When the height of the parent element collapses, the elements below the parent element will move up, resulting in a chaotic layout of the page.

For example:

<div class="box1">
	<div class="box2"></div>
</div>
	<div class="box3"></div>
Copy the code
.box1 {
		border: 10px red solid;
	    }
.box2 {
		width: 100px;
		height: 100px;
		background-color: blue;
		float: left;
	    }
.box3 {
		height: 100px;
		background-color: green;
		}
Copy the code

You can see that when the parent falls in height, the children below all move up and out of the document flow.

2. Methods to solve height collapse

Method one:

Set a fixed height for the parent element so that the height of the parent element can no longer adapt to the height of the child element. Cons: But you can’t make elements highly adaptive.

.box1 {
		border: 10px red solid;
		height:100px;
		}
Copy the code

Method 2:

Set overflow: hidden for the parent element, the solution to height collapse and height adaptation (following the BFC display principle) disadvantages: as long as the contents or elements are outside the parent element, it will be hidden;

.box1 {
		border: 10px red solid;
		overflow: hidden;
		}
Copy the code

Method 3:

Add an empty element below the floating element and set its properties. Disadvantages: Many empty tags will be added, increasing the structure burden, resulting in code redundancy;


      
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1 {
				border: 10px red solid;
			}
			
			.box2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
			
			.clear_fix{   /* Empty div attribute */
				clear:both; /* Clear both sides of the float */
				height:0;
				overflow:hidden;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
			<div class="clear_fix"></div>/* Add a blank div*/</div>
	</body>
Copy the code

Method 4:

display:table; Add display: table to parent element; Let the parent element convert the element type as the table does; Disadvantages: Changes the element type of the current element;


      
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1 {
				border: 10px red solid;
				display: table; /* Change the element type to table */
			}
			
			.box2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
Copy the code

Method five: universal elimination method

Add a blank block element via the after pseudo-class element, add the following attributes to CSS, and add the class name of clear_fix to the div to be cleared. Recommended for use without any side effects.


      
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.box1 {
				border: 10px red solid;
			}

			.box2 {
				width: 100px;
				height: 100px;
				background-color: blue;
				float: left;
			}

			.clear_fix:after { /* Attribute to be added */
				content: ""; /* Add content */
				clear: both; /* Clear side float */
				display: block; /* Convert the element type to block element */
				height: 0;
				overflow: hidden; /* Overflow the hidden attribute */
				visibility: hidden;/* Hide attributes */
			}
		</style>
	</head>
	<body>
		<div class="box1 clear_fix">
			<div class="box2"></div>
		</div>
	</body>
Copy the code

Technical Summary:

When the child element in the parent element will float, pay attention to the height collapse problem and solve it. Here, we recommend using universal cleanup to solve the problem

.clear_fix:after {
				content: ""; /* Add content */
				clear: both; /* Clear side float */
				display: block; /* Convert the element type to block element */
				height: 0;
				overflow: hidden; /* Overflow the hidden attribute */
				visibility: hidden;/* Hide attributes */
			}
Copy the code