Quick Reach
What is the float property?
You might have noticed the thumbnail images attached to a blog or website on a landing page or post pages to the left or right of first paragraphs or summary of the posts.
Similarly, a big first letter that covers 3,4 or more lines of the text in the news, articles or magazines websites. Both are shown in the examples below.
This can be done with the CSS float property. The float property allows wrapping the text paragraphs around images, while text can also be wrapped around paragraphs. Generally, the images are wrapped in right or left directions.
Following are a few examples of using the CSS float but first its syntax.
Syntax of float property
Following is the syntax of using the float property:
float: left;
Where the values can be:
- left: The element or image will be floated to left by using float: left;
- right: The element or image will be floated to right by using the float: right;
- none: The default value.
- There is no float center value.
Example of using float left value
Following is a float left example. In this example, an image is set to float to the left of a paragraph by using float property of CSS. You can notice in the code below that image is placed inside the paragraph. See the demo and code by clicking the link or image below:
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
|
<html>
<head>
<style>
.img_float
{
float:left;
margin:3px;
}
</style>
</head>
<body>
<p>
<img src=“TC_logo.png” width=“263” height=“60” />
This is tutorials collection logo. This is tutorials collection logo.
This is tutorials collection logo. This is tutorials collection logo.
</p>
</body>
</html>
|
Example of using float right value
Following is an example of using float: right value. In this example, an image is set to float to the right of a paragraph. See the example by clicking the link below:
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
|
<html>
<head>
<style>
.img_float
{
float:right;
margin:3px;
}
</style>
</head>
<body>
<p>
This is tutorials collection logo. This is tutorials collection logo.
<img src=“TC_logo.png” width=“263” height=“60” />
This is tutorials collection logo. This is tutorials collection logo.
</p>
</body>
</html>
|
Example of using float property set to both direction
This example shows images are floating to both; left and right by using the float CSS property.
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
|
<html>
<head>
<style>
.img_float_left
{
float:left;
margin:3px;
}
.img_float_right
{
float:right;
margin:3px;
}
</style>
</head>
<body>
<p>
<img src=“TC_logo.png” width=“263” height=“60” />
This is tutorials collection logo. This is tutorials collection logo.
</p>
<p>
This is tutorials collection logo. This is tutorials collection logo.
<img src=“TC_logo.png” width=“263” height=“60” />
This is tutorials collection logo. This is tutorials collection logo.
</p>
</body>
</html>
|
The float property with first big letter example
In this example, the first letter of the first paragraph is floated to the left in span element by using the float property.
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
|
<html>
<head>
<style>
.span_float
{
float:left;
font-size:45px;
line-height:40px;
font-weight:bold;
text-align:top;
}
</style>
</head>
<body>
<p>
<span>I</span>n this chapter float is explained, and this is text example. In this chapter float is explained, and this is text example.
</p>
</body>
</html>
|
As you can see, the letter I was occupying almost two lines of height that were assigned to the float property.
Further Reading: CSS clear
Leave A Comment?