Subject: CSS Float
Author: CyberSpider
Posted on: 04/20/2016 05:56:33 AM
The CSS float property is used, in similar way as position:absolute, to instruct device that the target element should be taken away from its normal flow and placed along the left or right side of its container. In contrast to position:absolute which may overlap other elements, float will squeeze the inline elements as if those inline elements are wrapping around the floated element.
The value list of float are:
none -- default;
left -- to the left side of its container;
right -- to the right side of its container.
First, take a look at the following normal flow:
.container {
margin: 5px;
border: 2px dashed #000000;
width: auto;
height: 220px;
}
.box {
margin: 10px;
width: 40px;
height: 50px;
}
#box1 {background-color: red;}
#box2 {background-color: green;}
<DIV class="container">
<div class="box" id="box1">Box#1</div>
<div class="box" id="box2">Box#2</div>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</DIV>
Try it yourself in sandbox »
As it can be seen, the normal flow is that each box starts with a new line and shows up one after another, followed by some text.
Now let the box#1 float to left and box#2 float to right:
#box1 {
background-color: red;
float: left;
}
#box2 {
background-color: green;
float: right;
}
Try it yourself in sandbox »
As it can be seen, the two boxes are out of normal flow with one floating to the left and the other to the right. More important is that the text are not overlapped by those bloating boxes.
Replies:
References:
