डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Float and Clear

Float Left

Float Left

Float Right

Float Right

Clear Both

आपने कई websites पर देखा होगा कि, website का कुछ हिस्सा left side पर होता है और कुछ हिस्सा right side पर होता है | इसकी वजह ज्यादातर float property होती है |

float property का प्रयोग inline elements के जैसा होता है | लेकिन float property का इस्तेमाल करने से Block Elements भी Inline Element की तरह Webpage पर display होते है |

float property का अगर ध्यान से इस्तेमाल नहीं किया जाता है तो आपके पूरे webpage का layout बिघड सकता है | ये layout न बिघड़ने के लिए clear property का इस्तेमाल करना जरुरी होता है |


Main float property values

  • none : Default. element; float नहीं होता है |
  • left : Element left side पर float होता है |
  • right : Element right side पर float होता है |

Example for float 'none' Value

Example पर <div> tag के float 'none' दिया गया है | float 'none' होने की वजह से <p> tag का text ये normally उसके निचे adjust हुआ है |

<style>
div{
 float : none;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div>float : none</div>
<p>
float : none; float : none; float : none; float : none; 
float : none; float : none; float : none; float : none; 
float : none; float : none; float : none; float : none; 
float : none; float : none; float : none; float : none; 
float : none; float : none; float : none; float : none;
</p>
Output :
float : none

float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none; float : none;



Example for float 'left' Value

Example पर <div> tag के लिए float 'left' दिया गया है | float 'left' होने की वजह से <p> tag का text या बचे हुए space पर adjust हो गया है |

<style>
div{
 float : left;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div>float : left</div>
<p>
float : left; float : left; float : left; float : left; 
float : left; float : left; float : left; float : left; 
float : left; float : left; float : left; float : left; 
float : left; float : left; float : left; float : left; 
</p>
Output :
float : left

float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left; float : left;



Example for float 'right' Value

Example पर <div> tag के लिए float 'right' दिया गया है | float 'right' होने की वजह से <p> tag का text या बचे हुए space पर adjust हो गया है |

<style>
div{
 float : right;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div>float : right</div>
<p>
float : right; float : right; float : right; float : right;
float : right; float : right; float : right; float : right;
float : right; float : right; float : right; float : right;
float : right; float : right; float : right; float : right; 
</p>
Output :
float : right

float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right; float : right;




clear Property in CSS

clear property का इस्तेमाल left float, right float या दोनों को clear करने के लिए किया जाता है |

Main clear Property Values

  • none : Default. element; left या right side पर float हो सकता है |
  • left : element; left side पर float नहीं हो सकता है |
  • right : element; right side पर float नहीं हो सकता है |
  • both : element; left और right side पर float नहीं हो सकता है |

Use clear Property to clear float left, right or both


clear Property for clear left, right or both

Without clear:left

<style>
div{
 float : left;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div>float : left</div>
<p>
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>



float : left

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

With clear:left

<style>
div{
 float : left;
 padding : 10px;
 border : 1px solid red;
}
p{
 clear : left;
}
</style>

<div>float : left</div>
<p>
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>
float : left

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

 

Without clear:right

<style>
div{
 float : right;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div>float : left</div>
<p>
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>



float : right

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

With clear:right

<style>
div{
 float : right;
 padding : 10px;
 border : 1px solid red;
}
p{
 clear : right;
}
</style>

<div>float : right</div>
<p>
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>
float : right

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

 

Without clear:both

<style>
.div1{
 float : left;
 padding : 10px;
 border : 1px solid red;
}
.div2{
 float : right;
 padding : 10px;
 border : 1px solid red;
}
</style>

<div class="div1">float : left</div>
<div class="div2">float : right</div>
<p>
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>



float : left
float : right

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

With clear:both

<style>
.div1{
 float : left;
 padding : 10px;
 border : 1px solid red;
}
.div2{
 float : right;
 padding : 10px;
 border : 1px solid red;
}
.p1{
 clear : both;
}
</style>

<div class="div1">float : left</div>
<div class="div2">float : right</div>
<p class="p1">
Hello World Hello World Hello World 
Hello World Hello World Hello World 
Hello World Hello World Hello World  
</p>
float : left
float : right

Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World Hello World

 

Floating Related Properties

PropertyDescription
floatElement को left या right side पर float किया जाता है |
clearleft, right या दोनों sides के float को clear करने के लिए इस्तेमाल किया जाता है |