Positioning Property with Float in CSS

Hello guys! Welcome to our series, CSS. In our last segment we had seen about CSS’s position properties. That how we can adjust the element through right, left, bottom and top. And with that it’s 2 properties absolute and relative related all the results also we checked. I hope in the last segment whatever practical we have performed; you have practiced that.  We will go ahead with our today’s segment.  Our today’s segment is about CSS positioning. Today’s segment is also important as in today’s segment, the layout that we generate of the web page, in that different elements are positioned in different layouts. When we do that placing, in which way we can do it, how can we give direction to it, to the element? That is what we will be seeing in today’s segment. So, we will go ahead with our session. 1^st of all, for CSS positioning our property that is used. That property is called as CSS Float property. Float property means, if we explain it simply. We know that the ship that is there or a boat. It floats in the river or sea. Float property can also be explained in a similar way. When we keep any element of the web page or on the screen. In which way we can float it. That we identify with a float property. Got it?  The way they have written here CSS float property is a positioning property. Where we have to position, that we can do it by float property. It is used to push an element to the left or to the right. Allowing other elements to wrap around it. Means, our element that is there like table or list or any element that is there. We can place that element to the left or to the right. But in which way we will place is the way where the rest of the elements can wrap around it. means  If we are keeping the element to the left. So, how will the rest of the elements be placed. If we give our element the float property to the right. Then how will our elements be placed. This managing that is there, in which way we give the positioning with the float. We will be seeing that with this property. Like it is written here. It is generally used with images and layouts. Means the images or layouts that are there, with that we use more of float property. Like here in our slide there are 3 images given. If we keep these images in line or we keep it on a web page. So, here the 1^st image is left aligned. Means that is placed on the left most portion of our screen. The center image is center aligned. Means it has been placed at the center. And our last image that is there. The one where financial is written. That is right aligned. If I remove the 1^st two images. In that case my right image will straightway come to the 1^st position. Because in that case we have not given it any floating property. But if I want that the 1^st two images are removed, Still my right most aligned imaged that is there, that should be on the right side itself. In that case it is important to give the CSS float property. Means we are fixing our images with or without the rest of the images. But my current image, the 1^st image in 1, 2, 3. The 1^st image should be on the left itself. The 2^nd image should stay in the center. 3^rd image should always be on the right. For that we have to use the floating property. Now we will see it practically, how it happens. Before that we will see the concept, what is the concept of float. okay! So, it is written here, a floated element may be moved as far to the left or to the right as possible. Means with the help of float how much ever I want that much left or right, we can float. Simply, it means that a floated element can display at extreme left or extreme right. It means that we can push it in the most left or most right direction of the screen. The elements after the floating element will flow around it. Means where we will place it, it will flow in that direction. The elements before the floating element will not be affected. Which means that lets say if I take 2 elements. I keep one to the left and other to the right. As soon as I keep any other element to the right. My left element will not be affected. It will remain as it is to the left. Same way if I give the right float to any other element. My left element will not have difference. It will remain there as it is. In the image floated to the right, the text flows around it, to the left. And if the image is floated to the left, the text flows around it to the right. Means if we place any image to the left. And after that I add a lot of text. So, that will flow around my image. Same way if I place the image to the left, like this is an image and here the text is coming. If the text is more in height than the image, then the text will also go below the image. But that will not touch my image, the image will remain in that position. Same way, if I keep my image to the left side then my text will start from the right. And where the image will end from below that my text will come. Got it ?  That we will perform practically and see, so that the point is clearer. okay! We will go ahead on the example of float. How float works. So, simply in the style, let’s say if we float the image, we can do this by giving float right or left. So, 1^st of all we will open Sublime text and then we will give it html “Example Positioning”, save, position.html. Now, inside this we will 1^st of all see how we give a float to the image. So, let’s say I have an image lying over here. So, I will use that image. So, let’s say I take an image, in source, images/, I have kept the name of my image as image itself. So, it is lime, image.jpg. I will save it and I will run the program. So, here on my webpage I can see a big image. So, let’s say I give this image height and width property.  So, width-200, height-200. Save, reload. okay! So, when I gave this 200, 200. My image is coming to the left most portion. Why is that? Because we have not applied any floating property here. So, our image is with start at 00 point. Now, when we apply any float property. Which is my tag? Image. So, I will go on style. In that I will give image tag, float property, float- right, save. So, as soon as gave right, my image moved from here to here. Means the position of my image has changed, it has come here from here. Means it starts from right. So, the 1^st use of float which we saw is if we want to place the image to the left, we don’t write anything for that. But yes, we can write it through left as well. Let’s say that the same image I take it once again. To this image I will give class, class, image, left. And to the other image I will give class, image, right. Now, this class is there, we will identify with it. So, let’s say the image element that I used, I will remove that. So, here this is my class. To image- left, I will give float- left. In the same way to the image- right, I will give right, save. So, here the 1^st one that I have selected is my image left, I have given float left, to the left image. So, this is floating on the left. And the 2^nd one is my image right, I have given it a float right so it is floating to my right-hand side. So, let’s say I will do one thing, I will change the position of these two. 1^st I will write right and then I will write left. Now I am reloading it. You can see that, my right one that is written 1^st is still coming on right. After right the left image that I have given, that is coming here. The left portion to the left most image and the right most image to the right portion. So, there can be a confusion here that if I have written 1^st the right image, then it should come here and the other left image that I have written. That should be placed from below. This kind of a confusion I can have. okay! But like the float property is there. Float property like we said, like the ship floats in the water. Similarly, our images float on the screen. It means that if I have given right, it will float on the right-hand side. Rest of the elements will not be affected with it. got it?  If I have given a left float, it will float to the left. Other elements will not be affected with it. In the same way, which images I gave left, that I am getting at the left. The one that I had given right, I am getting it at right. So, these were our floating property, how we can give left and right. If I zoom into this. We will see it somewhat in this way. Left one left side and the right one right side. Now this was our float property, we have seen float with an example. Now comes our CSS clear fix. This topic is very important, like it is mentioned here. A clear float or a clear fix, is a way for an element to clear the child elements, so that we do not require to add additional markup. Means here let’s say in the example here, I have given float right. If I want to write any content on it. So, that content should not affect with my float right property. So, for that I make use of clearfix. For example, we have a site with the name of Lorem Ipsum. Lorem Ipsum generator means, it is such a text which is used in the name of dummy text. If we want to use any text on our site and we wish that it should not come in copyright. In that case we can make use of Lorem Ipsum text. So, let’s say we place here Lorem Ipsum.(pause) This is my text; I will copy it. My right portion that is there, I am commenting the left one temporarily. In this p tag I will place my Lorem Ipsum. Okay, reload. Okay, what is happening here, I have first put the paragraph tag. So, how much ever content is there of the tag, that is getting displayed. After that, my right aligned image that is there, that is coming. Means my full portion, who has occupied it?. My p tag has occupied it. After that my image is starting. let’s say, My left aligned image that is there, I will remove that from here and place it before p. In that case what is happening is my image is coming and after that my content is starting from there. But because we have given the right image a float property. What is happening because of it is that my left image is coming here. As soon as my image gets over, my text starts. Now ideally my second image that is there, instead of starting from below, it is starting from my left most placed image, it starts from there, instead of it is starting from there. So, in case I have to remove this. So, I can make use of clearfix. So, what will I do about it? I will go in my code, my 1^st image that is left aligned, this one which is seen here.Okay! Now, what my content is. So, it is here. Now I want to show this image here, leaving this portion. So, what will I do? So, to this image, which is my image right, in that I will add a clearfix, clear- right. Okay. So, you can see here that no effect has come after reloading. It means my float right, where it is written, inside the same I cannot give clear right. So, what will I have to do for it? Let’s say before this image I add a p tag. or I add some heading, say h3. This image is right aligned. Save, okay. So, here I am getting a heading. After that is my image. let’s say, I give it a clearfix. So, h3, so this my clear : right that is there. I will place that here. Let’s say I make it left instead of right. Okay. So, what we have to understand here. When I write right instead of left, so what is happening. I had given my image, float: left aligned and we had not given any float to the p tag. So, what do we have to clear? The float that we have given, that we have to clear. So, here our image was float: left. So, after clearing the float. This, our content will start from here instead of here. So, I want to clear my left float. So, when I will run after writing clear left instead of clear right in h3. My content will come down and my image will start from here. So, let’s say we comment this h3 and check whether it is working without h3 or not? So, this comment, clear: left. So, as soon as I run it, instead of my image running from here. Now, it is starting from where my image is ending. Means, which floating property did we clear? Which  have currently given, currently which is left align, this image is left aligned. So, because it is float left, we cleared that and gave right. If I comment this and run, then my image starts from here. That means that it exists the floating property and doesn’t occupy that much space for self. When I clear this portion, when I clear this float. So, my image, instead of starting from here, starts from here. It will start from a new line. okay! got it? If we alternate the things. Let’s say, I keep my right aligned image up. Okay. So, this is right aligned, this is left aligned and this is my text. Now, I will place left aligned after text. Now what is happening? Because I have kept my right aligned image 1^st. So, here my image is coming and then from left my content is starting. And from here another left aligned image is starting. I want the same thing; I want that my image should not start from here. It should start from this line. So, in that case what I will have to do is, my left image, this one, means image left, there I have to apply Clearfix. So, in the left image, clear, because my image is right aligned. So, what will I clear? : Right. So, clear-right, save and reload. As soon as I reloaded it, this much of my portion which was occupied by float left property, so my right float is getting clear. So, my image is starting from this line. So, here what we have to understand is, the concept that we have to clear is this. Whenever we work with any floating image. If we are giving a float property to our image. So, it is based on the requirement, whether we have to clear it or not. If we are not clearing it there are chances that our website content is  there, that can be misplaced. The misplacement that is generated because of the float property, to clear that, we are using clear property. So, if you are using float property. So, it is not necessary that you also have to use clear property. got it?  It varies; if my requirement that is there, in that currently you can see that, in this way we have to generate the web page, in that case you will have to use clear property. But let’s say, in this way, where my text gets over, from there itself you have to generate the image. In that case you do not require to generate clear property. So, this clear property or float property, if you have to align the image to the left or to the right, in that case you can use the float property. If you wish that, that property should not affect my other properties, you can also make use of clear property. So, this was our Clearfix. So, whenever we, like it is mentioned here. Clear float is a way for an element to fix or clear the child elements. Means, current right aligned image that is there, in that right aligned image which is my child property, the image that I am keeping left aligned, means this image. So, my child image should not be affecting my right aligned image, that is the parent image. For that we had made use of clear here. So, this was our clear. So, guys or today’s segment which was there, in that we saw about the CSS positioning. With the help of float, we can generate leftmost or rightmost. We can place our elements in the right or in the left. So, for element placing we use the float property. Because of the float property the misplacement that is generated. To remove that we make use of Clearfix. In case of the left element there is no problem, so we will do, clear :left. The element that are float in right, that should not give any problem, so we will float right. So, this was a little tricky topic. So, I request you all to perform it’s practical on your own. If you are facing any difficulty performing the practical. You still have any doubt in understanding float or clear. You can tell us on forums.learnvern.com. We will try to clear your questions and revert to you. Our next segment is on CSS width and height. Thank you.