float
1. What is floating?
Purpose : To allow multiple block-level elements to be displayed on the same line;
document flow : the position occupied by displayable objects when arranged;
floating : to make elements break away from the normal document flow, and move in the specified order and direction until they touch To the outer edge of the parent element or the border of the adjacent floating element;
out of the normal document flow : it means that the original position does not occupy the original position after floating;
Note: the horizontal float can only move left or right and cannot move up and down.
Floating the z-index increases half a layer, but it cannot cover the text and pictures so it does not break away from the text flow (the z-index attribute can only be used for positioning elements).
2. Floating property
float:left； 元素向左浮动
float:right；元素向右浮动
float:none； 默认值，元素不浮动 默认
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.span1 {
float: left;
width: 150px;
height: 100px;
line-height: 100px;
}
.div2 {
float: right;
}
</style>
</head>
<body>
<span class="span1">
我是span1
</span>
<div class="div2">
我是div2
</div>
</body>
</html>
At this time, it can be found that floating can make block-level elements open from the content
At this time, it can be found that floating elements enable row-level elements to support width and height
3. Floating characteristics
3.1. Floating will break away from the normal document flow;
3.2. The level of floating elements can be improved; half level; half out of the document flow
3.3. Floating elements can make row-level elements support width and height;
3.4. Floating can make block-level elements expand from the content;
3.5 , After the element is added to float, it does not occupy a place, and the height of the parent box is 0
Floating breaks out of normal document flow Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.span1 {
float: left;
width: 150px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
}
.div2 {
float: right;
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
我是正常的问题111
<span class="span1">
我是span1
</span>
我是正常的问题222
<div class="div2">
我是div2
</div>
</body>
</html>
semi out of document flow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.span1 {
float: left;
width: 150px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
}
.div2 {
background-color: blue;
color: #fff;
}
</style>
</head>
<body>
<span class="span1">
我是span1
</span>
<div class="div2">
我是div2
</div>
</body>
</html>
It is found that the span1 element is actually above div2, but the text of div2 is not blocked, so it is half out of the document flow, not completely offline.
If you want to see it completely out of the way, the effect is that we can’t see the text of I am div2 , is blocked by the element span1, we can use the positioning position to achieve.
After the element is floated, it does not take up space, and the height of the parent box is 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
.span1 {
float: left;
width: 150px;
height: 100px;
line-height: 100px;
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div class="box1">
<span class="span1">
我是span1
</span>
</div>
</body>
</html>
According to the above example, we can summarize : After the element floats, it breaks away from the normal document flow, and the height of the parent element is 0, causing the height of the parent element to collapse, which will affect the normal layout of subsequent elements at the same level as the parent element.
4. Several methods to clear floating
1. Add a fixed height to the parent box of the floating element - not flexible enough
2. Add float to the parent box of the floating element - will cause new floating problems
3. Set the overflow property for the parent box of the floating element, the property value can be It is hidden|scroll|auto—may lead to incomplete display content; but the code is concise
4. After the floating element, add an empty div at the position where the floating element is in a parallel relationship, and add an attribute clear:both to the empty div; – The code is redundant, easy to understand, and easy to write
5. Recommended method: add the class name .clearfix to the parent box of the floating element
.clearfix{
*zoom:1}
.clearfix::after{
content:””;
display:block;
clear:both;
visibility:hidden;
height:0
}
No redundant code will be generated in the structure, and it can be written in the public style for easy reuse; it conforms to the idea of closed floating, and the structural semantics are correct