CSS Float

The CSS float property is used to specify how an HTML element should float with respect to another HTML element on a web page and the CSS float property can be assigned by possible values.

Example of Float

For more understanding about CSS float; let's assume a condition with an image & paragraph:

• Lets supposed, 1st you can define a div element after that you can define one image and a paragraph inside this div.
• If the image width is 200px and height is 200px after this image and just run this page and see the effect (You will see the image on top of the paragraph).
• BUT you can solve this problem by using CSS float property, after applying CSS float property you can see the effect image and paragraph both shift side by side.
• Now, you can write HTML and CSS code and test yourself.

The CSS Float Property

The float property is used for positioning and formatting content & there are 4th float properties used in CSS:

• float:left - The element floats to the left side of its parent element container.
• float:right - The element floats to the right side of its parent element container.
• float:none - By default, the element does not float.
• float:inherit - The inherit property is used to the same float value, which is of its parent float value.

CSS float:left

The element floats to the left side of its parent element container.

Example of float:left;

p {
    float:left;
    padding:0 10px 0 5px;;
 }
.my_img {
    width:200px; 
    height:200px;; 
    float:right;
 }

Output

Hey Guys!
Now, you can learn full stock CSS tutorial for begginer and profesional candidates and also top 100 CSS interview questions with answers for fresher and experience...

CSS float:right;

The element floats to the right side of its parent element container.

Example of float:right;

p {
    float:right;
    padding:0 5px 0 10px;;
 }
.my_img {
    width:200px; 
    height:200px;; 
    float:left;
 }

Output

Hey Guys!
Now, you can learn full stock CSS tutorial for begginer and profesional candidates and also top 100 CSS interview questions with answers for fresher and experience...

CSS float:none;

p {
    float:none;
    padding:10px 5px 0 5px;;
 }
.my_img {
    width:200px; 
    height:200px;; 
    float:none;
 }

Output

Hey Guys!
Now, you can learn full stock CSS tutorial for begginer and profesional candidates and also top 100 CSS interview questions with answers for fresher and experience...

CSS Clear Property

CSS Clear property is used to prevent float of an element in some direction, which means that the element will not allow float in that direction which is assigned in the value of the clear property.

The CSS clear property value can be assigned one value among five values, those possible values are listed below:

• left: The left value does not allow any floating element on the left side of the element.
• right: The right value prevents from floating of an element on the right side.
• both: This value is used for restricting float of an element either left or right side of an element.
• none: The none value is the default value and it allows float on both side.
• inherit: This inherent value is used when we want the same value as the parent element's clear property value.

Example of clear:both;

.img {
   width: 200px; 
   height: 200px; 
   float: right;
 }
p {
   border: 1px solid red; 
   color: white;
   clear: both;
 }