High collapse problem caused by element separation from document flow
1. Problem Description:
In the document flow, the height of the parent element is supported by the child element by default, that is, how high the child element is, how high the parent element is. However, when the child element is set to float, the child element will be completely separated from the document flow. At this time, the child element will not be able to support the height of the parent element, resulting in the height collapse of the parent element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> <style type="text/css"> .box1{ border: 10px red solid; } .box2{ background-color: yellow; width: 100px; height: 100px; float: left; } </style> </head> <body> <div> <div></div> </div> </body> </html>
The result of the element leaving the document stream
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Page title</title> <style type="text/css"> .box1{ border: 10px red solid; } .box2{ background-color: yellow; width: 100px; height: 100px; /* float: left; */ } .box3{ height: 100px; background-color: green; } </style> </head> <body> <div> <div></div> </div> <div></div> </body> </html>
Want this effect.png
After setting float (height collapse problem). png
- Due to the high collapse of the parent element, all the elements of the parent element will move upward, which will lead to page layout confusion. Therefore, the problem of high collapse must be avoided in development
2. Problem solving 1:
According to the W3C standard, every element in a page has a hidden attribute called Block Formatting Context, or BFC for short. This attribute can be turned on or off by default.
When BFC is turned on, the element will have the following characteristics:
- The vertical outer margin of the element does not overlap the child element
- Elements with BFC enabled will not be overwritten by floating elements
- Elements with BFC enabled can contain floating elements
How to turn on BFC:
-
1) Set the floating of the element (although it can open the parent element, it will lead to the loss of the width of the parent element and the upward movement of the lower element, which can not solve the problem)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > page title < / Title >
<style type="text/css">
.box1{
border: 10px red solid;
/Non parent element set floating/
float: left;
}
.box2{ background-color: yellow; width: 100px; height: 100px; float: left; } .box3{ height: 100px; background-color: green; } </style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>
 + 2)Set the absolute positioning of elements (similar to 1 effect, not recommended) + 3)Sets the of the element inline-block(The width of the parent element is gone again (not recommended)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > page title < / Title >
<style type="text/css">
.box1{
border: 10px red solid;
display: inline-block;
}
.box2{ background-color: yellow; width: 100px; height: 100px; float: left; } .box3{ height: 100px; background-color: green; } </style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>
 + 4)The element's overflow Set to a non visible Value of (it is recommended to turn it on in this way) BFC，Small side effects, IE6 And below are not supported. You can use it at this time hasLayout,Setting for parent element```zoom:1```,(not repeated here)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > page title < / Title >
<style type="text/css">
.box1{
border: 10px red solid;
overflow: hidden;
}
.box2{ background-color: yellow; width: 100px; height: 100px; float: left; } .box3{ height: 100px; background-color: green; } </style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>
 ****** > ***3.Problem solving 2:*** clear Property can be used to clear the effect of floating around an element. That is, the element will not change its position because a floating element appears above it. + Optional values: - left : Ignore left float (clears the effect of left float on the current element) - right : Ignore right float (clears the effect of right float on the current element) - both : Ignore all floats (clear the most affected pair on both sides) - none : Do not ignore float, default
/Open the parent element through blank, clear the floating, basically no side effects, and can be compatible with various browsers/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > page title < / Title >
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}
.box2{ background-color: yellow; width: 100px; height: 100px; float: left; } .clear{ clear: left; } .box3{ height: 100px; background-color: green; } </style>
</head>
<body>
<div>
<div></div>
<div></div>
</div>
<div></div>
</body>
</html>
 ****** > ***4.Problem solving 3:***adopt after Pseudo classes, and adding div The effect is the same, and it will not be added to the page div，Most recommended method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
< title > page title < / Title >
<style type="text/css">
.box1{
border: 10px red solid;
clear: left;
}
/* Select the back of box1 through the after pseudo class */ .clearfix:after{ /* An empty congent must be set, otherwise it will not work */ content: ""; /* Convert to block element */ display: block; clear: both; } /*For IE6 compatibility*/ .clearfix .box2{ background-color: yellow; width: 100px; height: 100px; float: left; } .box3{ height: 100px; background-color: green; } </style>
</head>
<body>
<div>
<div></div>
</div>
<div></div>
</body>
</html>
Author: Ming Shi
Link: https://www.jianshu.com/p/f09f40591d97
Source: Jianshu
The copyright belongs to the author. For commercial reprint, please contact the author for authorization, and for non-commercial reprint, please indicate the source.