/
11. float-rules.html
67 lines (60 loc) · 2.54 KB
/
11. float-rules.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html>
<head>
<title>CSS Float and Clear rules</title>
<style type="text/css">
body {
font-family: Verdana, Sans-Serif;
font-size: 25px;
}
div.wrapper {
margin-bottom: 120px;
}
.red {
color: red;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-both {
clear: both;
}
</style>
</head>
<body>
<div class="wrapper">
Here are two images that have float:left;
<img src="images/logocss.gif" class="float-left" alt="css" />
<img src="images/logocss.gif" class="float-left" alt="css" />
<span class="red">
As you can see they were placed one next to the other. Also
note that THIS whole red text appears in code AFTER the images
</span>
</div>
<div class="wrapper">
Next two images have float:left and clear:both;
<img src="images/logocss.gif" class="float-left clear-both" alt="css" />
<img src="images/logocss.gif" class="float-left clear-both" alt="css" />
<span class="red">
As you can see now the images are not placed one next to the other because the clear rule prevents this. Yet the red text keeps
on showing BEFORE them, although in code appears AFTER them, because itself is in span that has no float rule applied
</span>
</div>
<div class="wrapper">
<img src="images/logocss.gif" class="float-left" alt="css" />
<img src="images/logocss.gif" class="float-right" alt="css" />
Now - this is the best usage of float property - you can wrap the text around the images very neatly. Here we will add some more text to demostrate this
in details: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae leo eu felis scelerisque rutrum.
Sed sapien. In et arcu sit amet nunc semper accumsan. Mauris eget felis vel pede tempus lacinia. Curabitur eu purus sed
tortor porta pellentesque. Fusce aliquet pede at nisi.
<img src="images/logocss.gif" class="float-right" alt="css" />
Donec varius. Mauris gravida elit ac velit. Aliquam accumsan.
Praesent condimentum nisl vitae ligula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse sed ligula.
Phasellus pharetra suscipit tortor. Vestibulum viverra urna vitae erat. In a est fermentum nulla ullamcorper nonummy.
Aenean eros.
</div>
</body>
</html>