CSS float property for blocks
The float
property applies not only to images, but also to any other blocks.
Let's check this out.
Let's say we have a parent div with class parent
, and inside it there is text and a child div with class child
. Both divs are given a border, and the child div also has a width and height:
<div class="parent">
<div class="child"></div>
long text...
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Now let's set the child div's float
to left
- the text will start to flow around our block:
<div class="parent">
<div class="child"></div>
long text...
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
: