Basics of CSS Float
3. CSS Float
3.3. clear
Now, let us add a third div element which also floats to the left:
<!DOCTYPE html>
<html>
<head>
<title>Module 5.</title>
</head>
<body>
<div style="border:1px solid #cccccc;">
They went down, down, down, till at last they came to a passage
with a door at one end, which was only fastened with a latch.
The eldest Princess opened it, and they found themselves
immediately in a lovely little wood, where the leaves were
spangled with drops of silver which shone in the brilliant
light of the moon.
<div style="float:left; background-color:red; color:white;"> This is
box 1 </div>
<div style="float: right; background-color:green; color:white;"> This
is box 2</div>
<div style=" float:left; background-color:yellow; color:red;">
This is box 2</div>
They next crossed another wood where the leaves were sprinkled
with gold, and after that another still, where the leaves
glittered with diamonds. At last, the Star Gazer perceived a
large lake, and on the shores of the lake twelve little boats
with awnings, in which were seated twelve princes, who,
grasping their oars, awaited the princesses.
</div>
</body>
</html>
This is what the code looks like now, when rendered in a browser:
Notice how the two left floating elements are positioned on the same horizontal “line” after each other.
Imagine now that you want the two div elements with the red background to float left, but under each other instead of next to each other. To do that, you need to set the clear CSS property.
The clear CSS property can take one of these values:
- left
- right
- both
- none
The left value means that the element should stay clear of all left floating elements.
The right value means that the element should stay clear of all right floating elements.
The both value means that the element should stay clear of both left and right floating elements.
The none value means no clearing, which is the same as leaving out the clear CSS property.
Let us set the clear CSS property of the last div element to left. Then the last div element should still float left but stay clear of the first left floating div element. Here is how the code looks:
<!DOCTYPE html>
<html>
<head>
<title>Module 5.</title>
</head>
<body>
<div style="border:1px solid #cccccc;">
They went down, down, down, till at last they came to a passage
with a door at one end, which was only fastened with a latch.
The eldest Princess opened it, and they found themselves
immediately in a lovely little wood, where the leaves were
spangled with drops of silver which shone in the brilliant
light of the moon.
<div style="float:left; background-color:red; color:white;"> This is
box 1 </div>
<div style="float: right; background-color:green; color:white;"> This
is box 2</div>
<div style=" float:left; clear:left; background-color:yellow; color:red;">
This is box 2</div>
They next crossed another wood where the leaves were sprinkled
with gold, and after that another still, where the leaves
glittered with diamonds. At last, the Star Gazer perceived a
large lake, and on the shores of the lake twelve little boats
with awnings, in which were seated twelve princes, who,
grasping their oars, awaited the princesses.
</div>
</body>
</html>
Here is what the code looks like when rendered in a browser:
Text from: Robbins, J. N. (2012). Learning Web Design, 4th Edi3on A Beginners Guide to HTML, CSS, JavaScript and Web Graphics [E-book]. O’Reilly. hIp://wM.tw/ref/robbins.pdf
Notice how the last div element still floats left, but stays under (clear of) the first left
floating div element.