Let's first look at the effects of floating.
Normal cases without floating are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
background-color: lightblue;
}
</style>
</head>
<body>
<div class="container">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
</div>
</body>
</html>
No floating effect chart: 
The cases of adding floats to h1 and p are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
background-color: lightblue;
}
h1,p{
float: left;
}
</style>
</head>
<body>
<div class="container">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
</div>
</body>
</html>
Add floating effects: 
As you can see, after adding floats to h1 and p, the background color of the parent elements that wrap them disappears, as if they could not be wrapped. This is the trouble caused by floating. There are several ways to solve it:
Method 1: Add an empty label to the parent element that wraps the floating element.
<div style="clear:both"></div>The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
background-color: lightblue;
}
h1,p{
float: left;
}
</style>
</head>
<body>
<div class="container">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
<div style="clear:both"></div>
</div>
</body>
</html>
Design sketch: 
Disadvantage: Adding a meaningless tag violates the web standard of separation of structure and performance. It would be inconvenient to add many such tags in later maintenance.
Method 2: Add overflow: auto or overflow:hidden in the css style of the parent element encapsulating the floating element.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
overflow: auto;
background-color: lightblue;
}
h1,p{
float: left;
}
</style>
</head>
<body>
<div class="container">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
</div>
</body>
</html>
Design sketch: 
Method 3: Set the corresponding floating style in the css style of the parent element that wraps the floating element.
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
float: left;
background-color: lightblue;
}
h1,p{
float: left;
}
</style>
</head>
<body>
<div class="container">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
</div>
</body>
</html>
Design sketch: 
Disadvantage: It's impossible to build each layer in a floating layer, which can affect page layout.
Method 4: Add a css-style clearfix to the parent element of the wrapped floating element. Its attributes are as follows
.clearfix:before,
.clearfix:after{
content:" ";
display: table;
}
.clearfix:after{
clear:both;
}The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Method of Clearing Floating</title>
<style type="text/css">
.container{
background-color: lightblue;
}
h1,p{
float: left;
}
.clearfix:before,
.clearfix:after{
content:" ";
display: table;
}
.clearfix:after{
clear:both;
}
</style>
</head>
<body>
<div class="container clearfix">
<h1>The farthest distance in the world</h1>
<p>The farthest distance in the world,Is the distance between fish and bird,One is in the sky, another is in the sea</p>
<p>The furthest distance in the world,It's the distance between fish and birds.,One in the sky and the other in the deep sea</p>
</div>
</body>
</html>
Design sketch: 
The last method is more commonly used.