table of Contents
Preface
We all know that the floating of the child element will cause the height of the parent element to collapse. If the child element and the parent element are both floating, will the height of the parent element still collapse?
1. When the parent element is not floating
First, we set up three boxes a, b, and c, which are the grandpa element, the parent element, and the child element. c floats, a and b do not float.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 300px;
background-color: pink;
}
.b {
width: 200px;
background-color: blue;
}
.c {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="a ">
<div class="b">
<div class="c"></div>
</div>
</div>
</body>
</html>
Display result: It
can be seen that after floating the child element c, the height of the parent element b is not supported.
The height of the grandpa element is determined by the height of the parent element, so it is also 0.
2. When the parent element is also floating
Both the child element c and the parent element b float
code:
<!DOCTYPE html>
<html>
<head>
<style>
.a {
width: 300px;
background-color: pink;
}
.b {
width: 200px;
background-color: blue;
float: left;
}
.c {
width: 100px;
height: 100px;
background-color: red;
float: left;
}
</style>
</head>
<body>
<div class="a ">
<div class="b">
<div class="c"></div>
</div>
</div>
</body>
</html>
Display result: It
can be seen that when the child element floats, if the parent element also floats, then the height of the parent element will not collapse.
3. Summary
If the child element floats, if the parent element does not float, then the height of the parent element will collapse; if the parent element also floats, then the height of the parent element will not collapse.