In a document stream, the height of the parent element defaults to be propped up by the child element
When a float is set for a child element, the child element is completely detached from the document stream.
At this point, the child element will not be able to support the height of the parent element, resulting in the height collapse of the parent element.
Because the height of the parent element collapses, all elements under the parent element move up, resulting in confusing page layout.
So we need to avoid the problem of high collapse in development.
How to Open Element BFC
1. Setting element float
- Opening in this way can open the parent element, but it will cause the width of the parent element to be lost.
And using this method can also cause the elements below to move up, which can not be solved.
2. Setting element absolute positioning
3. Set the element to inline-block
- Can solve the problem, but will lead to loss of width, not recommended for use
4. Set the overflow of the element to a non-visible value
.box1{
/* Set a border for box 1 */
border: 10px red solid;
/*
zoom Support only in IE, not in other browsers
*/
zoom: 1;
overflow:hidden;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
clear can be used to remove the effect of floating other elements on the current element
Optional values:
none, default value, not clear float
Left, clear the effect of the left element on the current element
Right, clear the right side
Both, remove the influence of the elements on both sides on the current elements
Clear the floating of the element that has the greatest impact on him
Solution to high collapse II:
You can add a blank div directly to the end of the highly collapsed parent element
Since the div does not float, it can hold up the height of the parent element.
Then the float is cleared, and the height of the parent element can be extended by this blank div.
No side effects at all.
Although this approach solves the problem, it adds redundant structure to the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>
Optimal Solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
.box1{
border: 1px solid red;
}
.box2{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
/*
You can add a blank block element to the end of the element through the after pseudo class, and then clear the float.
*/
.clearfix:after{
/* Add a content */
content: "";
/* Convert to a block element */
display: block;
/* Clear both sides of the float */
clear: both;
}
/* after pseudoclass is not supported in IE6
So in IE6, you need to use haslayout to deal with it. */
.clearfix{
zoom: 1;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
</html>