 |
| HTML and CSS tutorial for beginners in English |
Hello friends, welcome back to KTL's HTML and CSS tutorial. Today we will study lesson-35.
In the previous lesson, we have studied CSS list properties.
Today we will study CSS float properties.
CSS float property
CSS float property is used to define how an image is floated in the text. We can decide whether the image should be displayed on the left side or right side of its container. Text will wrap this image.By default a web browser displays one element below another element. Using CSS float property we can change this default and define the position of an element. We can display elements inline using CSS float property.
Let us write CSS float property in our script. Open a new Notepad file and copy code from Lesson-33 in this file. Let us write code for displaying an image in web page.
<img id="img1" src="hibiscus.jpg" alt="Hibiscus flower" style=“width:50vw; height:7vw;">
Write style as follows:
#img1 {
float:left;
margin-right:1rem;
}
It is easy to note that we have floated this image on the left side of its container.
Let us insert another image and float it on the right side.
<img id="img2" src="Image for Lesson-34.jpg" alt="Image 2" style=“width:50vw; height:7vw;">
Write style for img2 is as follows:
#img2 {
float:right;
margin-left:1rem;
}
Save this file as "Lesson-35-1" and "Lesson-35-1.html". Click on Figure 35-1 to open PDF file of the source code.
 |
| Figure 35-1 CSS float property |
Now double click on HTML file and see the output.
 |
| Figure 35-2. CSS float Property |
Observe the output. One image is displayed on the left side and another on the right side. Text is wrapping both images.
Click on figure 35-2 to see output in a web page.
Float none
We can also mention float:none. This means that image should not be floated. Therefore, image will be displayed in its default position.
CSS clear property
This property specifies that an element should not be floated on the side specified. This has values left, right and both. For example,clear left;
means do not float on the left side.
We have seen how to float an image. In the similar manner we can float other elements also. Let us take an example. We will float first letter of a paragraph.
Open a new Notepad file. Copy all code from lesson-35-1 in this file. Let us define style for <span>.
span {
float:left;
font-family: "Goudy Stout";
font-size:300%;
margin-right: 0.2vw;
}
Write following line in the next line to second <p> tag.
<span>E</span>
Save this file as "Lesson-35-2" and "Lesson-35-2.html". Click on the following figure to open the PDF file of source code.
 |
| Figure 35-3. CSS float property |
Now double click on HTML document and see the output. To see this output in a web page click on the figure 35-4.
 |
| Figure 35-4. CSS float property |
Note the style for first letter of second paragraph. The style that we have defined in <span> is applied.
Important Points
1. CSS float property is used to decide how an element will be floated in its container - left, right or both.2. CSS float property is used to change the default position of an element displayed in a web page.
3. We can also mention float none, which means element should not be floated. That means, this element is floated in its default position.
4. Clear property is used to tell that do not allow to float an element on the side specified in clear.
Lesson-34 Lesson-36
