Clear float
css uses floating and causes the collapse of the parent element. If you use the clear floating
parent box to collapse
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background: red;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
1. Clear float
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background: red;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div style="clear: both;"></div>
</div>
</body>
</html>
2 . overflow: hidden
Add overflow: hidden to the parent box
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 60px;
width: 900px;
background: red;
overflow: hidden;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
3 Pseudo-classes (commonly used)
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
margin: 60px;
width: 900px;
background: red;
*zoom: 1;
}
.container::after {
content: "";
display: block;
/* 不能少 */
visibility: hidden;
/* 元素是不可见的。 */
clear: both;
overflow:hidden;
}
.box1 {
float: left;
width: 200px;
height: 200px;
background-color: blue;
}
.box2 {
float: right;
width: 400px;
height: 100px;
background: cyan;
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>
BFC
1. Definition
BFC (Block formatting context) is literally translated as "block-level formatting context". It determines how the element locates its content and the relationship and interaction with other elements. When it comes to visual layout, Block Formatting Context provides an environment where HTML elements are laid out according to certain rules.
It is part of the visual CSS rendering of the Web page, the area where the layout process of the block box occurs, and the area where the floating element interacts with other elements.
2. Function
Form a completely independent space, so that the sub-elements in the space will not affect the outside layout
- Use BFC to avoid overlapping margins. Solve margin collapse, merge margin, clear floating flow
- Fixed width on the left and adaptive two-column layout on the right
- When the child element is set to float, there is a problem of the collapse of the parent element box
3. Trigger method
- float is not none (left right)
- position is not relative and static (absolute fixed)
- overflow is auto scroll and hidden
- The value of display is table-cell or inline-bloc