HTML+CSS Easy to Get Started with Float (float)
What is Float
CSS Float will move the element to the left or right, and the surrounding elements will also be rearranged.
Float (float) is often used for images, but it is also very useful in layout
How elements float
The elements float horizontally, which means that the elements can only move left and right but not up and down.
A floating element will try to move left or right until its outer edge touches the border of the containing box or another floating box.
Elements after the floated element will surround it.
Elements before the floated element will not be affected.
If the image is right-floated, the text flow below will wrap to the left of it
div{
float:right;
}
Below we will do an example: for example, there are 2 divs with different backgrounds
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動</title>
<style type="text/css">
/*在這里會用到id選擇器*/
div{
width:600px;
height:600px;
border:1px solid black;
}
#dv1{
width:100px;
height:100px;
background-color:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div>
<div id='dv1'></div>
<div id='dv2'></div>
</div>
</body>
</html>
