CSS Float
CSS float Property controls the way an element moves gently in a container or block & another element(like texts) wraps around this element. This also decides which element floats and which doesn’t float.
- Suppose, you have an element like div(or container) and you want to float it to the left of another element say a paragraph, then you should define the div with float:left.
- Similarly, if you want to move the element to the right of its block or container, then you should use float:right.
- By default, the element will not float around its block or container. So, if you want to make sure that an element should not float at all, even though its parent is supposed to float, then you should define it with float:none.
- To float an element to the starting side of its container(or block), you should code float:inline-start. By default, it will be left side as the default direction is ltr but if the direction is rtl, then it will be the right side.
- To float an element to the Ending side of its container(or block), you should code float:inline-end. By default, it will be left side as the default direction is ltr but if the direction is rtl, then it will be the right side.
- To get the same float property of the parent, you should code float:inherit.
CSS float left
The float: left will float an element to the left side of its container or block.
The Syntax of float left:
float: left;
Example
<style> .main-lf { padding:10px; width:410px; border:8px solid green; } .left-float { width:150px; height:50px; border:3px solid blue; float:left; padding-left: 5px; margin:0 5px; } </style>
CSS float right
The float: right will float an element to the right side of its container.
The Syntax of float right:
float: right;
Example
<style> .main-rf1, .main-rf2 { padding:10px; width:410px; border:8px solid yellow; } .right-float { width:150px; height:50px; border:3px solid aqua; float:right; padding-left: 5px; margin:0 5px; } .right-float-img { width:190px; height:180px; border:1px solid aqua; float:right; padding-left: 2px; margin:0 5px; } </style>
To wrap text around images(by using CSS float image to left or right), you should make sure that the width & height of the image should fit your requirement. Cross check in all the browsers to validate if it is working fine.
Although, Float is still useful in some cases and can be used to create website layout TutorialBrain suggests to use either Flex or Grid to create website layout which are better alternatives than Float. Sometimes, website designers complain that CSS Flex is not working for them & it takes some time to fix the issue related to floating.
So, we suggest using Float property for smaller tasks while Flex and Grid for bigger & Complex tasks.
CSS float none
The float: none doesn’t float an element within its container or block.
The Syntax of float none:
float: none;
Example
<style> #none-float { color:red; text-decoration:underline; float:none; padding-left: 5px; margin:0 5px; } </style>
You might have some questions like –
- How to float an element like div or image to center?
The answer to this is using CSS Align.
- How do you float an element like div at the bottom of its container?
To achieve this, you can add position:relative to the container & position:absolute; bottom:0; to the child div.
Interview Questions and Answers CSS
CSS float Property controls the way an element moves gently in a container or block & another element wraps around this element.
CSS Float Properties are:
float: left – floats the element to left side of the webpage.
float: right – floats the element to the right side of the webpage.
float: none – The float: none doesn’t float an element within its container or block.
To make image Float in left we need to use the CSS float property.
Syntax:
float:left;
To make image Float in right, we need to use the CSS float property.
Syntax:
float:right;