The Clear property
The CSS clear property is used to specify floating of the other element. By default, you can float an element in either direction, left or right of the other element. However, by using the clear CSS property you can specify which direction to allow and to not allow other element’s floating.
An example of clear property
Clear property has the following values:
- Clear: none (This is the default value where other elements are allowed to float in any direction).
- Clear: left (The other element is not allowed to float left).
- Clear: right (The other element is not allowed to float right).
- Clear: both (The other element is not allowed to float left or right)
Clear property with both and left values example
The following example shows how to use CSS clear property. The example below shows four paragraphs.
The first two paragraphs use CSS clear: both value while images are set with float property to the left and right, respectively.
The last two paragraphs use the default value in the clear property. You can see the difference by seeing the example online.
Experience this example online
|
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<html>
<head>
<style>
.img_float_left
{
float:left;
margin:3px;
}
.img_float_right
{
float:right;
margin:3px;
}
.p_ex1
{
clear:left;
}
.p_ex2
{
clear:both;
}
</style>
</head>
<body>
<h1>With clear:both property</h1>
<img src=“TC_logo.png” width=“263” height=“60” />
<p>
This is tutorials collection logo. This is tutorials collection logo.
This is tutorials collection logo. This is tutorials collection logo.
</p>
<img src=“TC_logo.png” width=“263” height=“60” />
<p>
This is tutorials collection logo. This is tutorials collection logo.
This is tutorials collection logo. This is tutorials collection logo.
</p>
<h1>Without clear:both property</h1>
<img src=“TC_logo.png” width=“263” height=“60” />
<p>
This is tutorials collection logo. This is tutorials collection logo.
This is tutorials collection logo. This is tutorials collection logo.
</p>
<img src=“TC_logo.png” width=“263” height=“60” />
<p>
This is tutorials collection logo. This is tutorials collection logo.
This is tutorials collection logo. This is tutorials collection logo.
</p>
</body>
</html>
|
Also see CSS float
Leave A Comment?