CSS Float(floating)
What is float?
float is float. Its function in CSS is to take an element out of the normal document flow and move it to the "leftmost" or "rightmost" of its parent element. The following explains the concepts of several nouns in this definition:
Document flow: In HTML, document flow is the order in which elements are arranged from top to bottom.
Detached from document flow: Elements are pulled out of their normal order.
Leftmost/rightmost: The above-mentioned moving to the leftmost and rightmost of the parent element means that the element moves to the left or right until it hits another floating element or the boundary of the parent element's content area (excluding padding ).
float attribute:
## ① left: The element floats to the left. ② right: The element floats to the right. ③ none: Default value. ④ inherit: Inherit the float attribute from the parent element.
Example: left float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:left;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>Example: right float
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
float:right;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
float:right;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>##Floating elements next to each otherIf you put several floating elements together, they will be next to each other if there is space.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<title>float属性</title>
<style type="text/css">
#a
{
background-color:Red;
height:50px;
width:100px;
}
#b
{
background-color:Yellow;
height:50px;
width:200px;
}
#c
{
background-color:Blue;
height:50px;
width:300px;
}
#d
{
background-color:Gray;
height:50px;
width:400px;
}
div
{
float:left;
}
</style>
</head>
<body>
<div id="a">div-a</div>
<div id="b">div-b</div>
<div id="c">div-c</div>
<div id="d">div-d</div>
</body>
</html>Clear float - After using clear
After an element is floated, the surrounding elements will be rearranged. To avoid this, use the clear attribute .
The clear attribute specifies that floating elements cannot appear on both sides of the element.
