One: High degree of collapse
Under normal circumstances, we do not set the height of the parent element, and let the child elements inside it automatically expand the height of the parent element, so that the height of the parent element can change with the change of the height of the child element. However, if the child element Setting float will break away from the document flow, which will not support the height of the parent element, causing the height of the parent element to be lost and affecting the entire page layout. This is called height collapse.
When float is not set, the code is as follows:
<style type="text/css">
.outer {
width: 200px;
border: 10px red solid;
}
.inner {
width: 100px;
height: 100px;
background-color: blue;
}
.box3 {
width: 300px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
<div class="box3"></div>
</body>
The result is as follows:
Set float for child element “inner”
.inner {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
The result is as follows:
Two: Solution
1. Set your own height for the parent element (but not recommended)
.outer {
width: 200px;
border: 10px red solid;
height: 100px;
}
2. Enable BFC (block-level formatting context) for the element
BFC is an attribute that comes with the element. It is turned off by default. Once turned on, the element will become an independent block with some characteristics. These characteristics can help us solve some problems.
Features of BCF after opening:
1. For elements with BFC enabled, the vertical margins will not overlap.
2. Elements with BFC turned on will not be covered by floating elements.
3. Elements that turn on BFC will contain floating elements, which can solve the problem of height collapse.
How to enable BFC
1. Set float
It can solve the height collapse problem, but the width will be lost and the page layout will still be affected.
.outer {
width: 200px;
border: 10px red solid;
float: left;
}
2. Convert elements into inline blocks
Height collapse can be solved, but width will be lost and there will be a three-pixel problem
.outer {
width: 200px;
border: 10px red solid;
display: inline-block;
}
3. Overflow attribute non-visible value
Minimal side effects, recommended
.outer {
width: 200px;
border: 10px red solid;
overflow: hidden;
}
4. Turn on absolute positioning
It can solve the height collapse problem, but the width will be lost and the page layout will still be affected.
.outer {
width: 200px;
border: 10px red solid;
/* Turn on absolute positioning */
position: absolute;
}
3. Add a blank block element below the floating element
Since this block element is not floated and is still in the document flow, you can set a clear float for this block element so that it can support the height of the parent element. The disadvantage is that the page has an extra blank structure.
No blank block element is added, the result is as follows
Add a blank block element box3
.box3{
width: 200px;
height: 100px;
background-color: yellowgreen;
clear: both;
}
The result is as follows:
Clear float
clear can be used to clear the impact of other floating elements on the current element
Optional values:
none, default value, does not clear floats
left, clears the impact of the left floating element on the current element
right, clears the impact of the floating element on the right on the current element
both, clear the impact of floating elements on both sides on the current element, and clear the floating of the element that has the greatest impact on it.
<body>
<!-- Requirement, set box1 to float to the left, box2 to float to the right, and box3 to stay in place -->
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
<style type="text/css">
.box1 {
width: 100px;
height: 100px;
background-color: yellow;
float: right;
}
.box2 {
width: 200px;
height: 200px;
background-color: yellowgreen;
float: left;
}
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
}
The result is as follows:
Use clear to eliminate the impact of box2 floating on box3
/* Requirement: Eliminate the impact of box2 floating on box3 */
.box3 {
width: 300px;
height: 300px;
background-color: skyblue;
clear: both;
}
The result is as follows:
4. You can add a blank block element to the end of the element through the after pseudo-class, and then clear its float
The principle of doing this is the same as adding a div. It can achieve the same effect without adding extra divs to the page. This is our most recommended method and has almost no side effects.
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
.box1 {
width: 200px;
border: 10px solid red;
}
.box2 {
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
The result is as follows:
Add a blank block element to the end of the element through the after pseudo-class, and then clear its float
.clearfix::after {
content: "";
/* display: block; */
display: table;
clear: both;
}
The result is as follows:
