If you want to lay out the web page, then it is indispensable to use float.
Floating Features: Deviating from the standard document flow.
For block-level elements such as span, if you want to change the width and height, you can float the span.
There are no block-level elements and row-level elements after the float, all elements are equal.
The parent element floats the child element will not float "Inheritance different from JAVA"
(emphasis) Floating elements will passively cover other non-floating elements, but will not cover the content of other non-elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
h1 {
width: 200px;
height: 200px;
background-color: red;
}
div{
float: left;
width: 400px;
height: 100px;
background-color: black;
}
</style>
<body>
<div></div>
<h1></h1>
</body>
</html>
(emphasis) Floating elements will not actively cover other non-floating elements
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
h1 {
width: 200px;
height: 200px;
background-color: red;
}
div{
float: left;
width: 400px;
height: 100px;
background-color: black;
}
</style>
<body>
<h1></h1>
<div></div>
</body>
</html>
Floating merges without margins (non-floating margins merge)
float collapse without margin
Floating elements are automatically snapped
How to clear floats:
Why clear floats?
Because a box container has an off-label element inside
Think about it, if the element inside is off-label, it means that this element no longer belongs to the category of standard document flow.
Therefore, it will not occupy the actual physical space, so the box container will not be stretched by the off-label element. At this time, some things will not be displayed. For example, the background color you add to the container will not be displayed, because This box container has no height.
Solution:
1. Define a height for the box container in advance (generally deprecated)
2. Add overflow: hidden to the box (recipe, but not deprecated)
3. Add float to the box too (absolutely deprecated)
4.clear property (none: allow floating on both sides both: clear no floating on both sides left: clear the effect of the left floating right: clear the floating effect on the right) (OK, but margin top, buttom fail because the parent container still has no height)
5.
<style type="text/css">
.clearFix{}
.clearFix::after{
clear: both;
}
.clearFix::before,clearFix::after{
content: "";
display: block;
}
</style>
(Internationally accepted)