CSS

Float Property in CSS

Float

Float property की इन पाँच में से कोई एक value हो सकती हैं –

  1. left :- यह value देने पर element left side में float होता हैं।
  2. right :- इससे element right side में float होता हैं।
  3. none :- यह value देने से element float नहीं होता हैं बल्कि page के normal flow के हिसाब से show होता हैं।
  4. initial :- यह keyword किसी भी CSS property की default value set करने के लिए use किया जाता है|
  5. inherit :- किसी element को float की value inherit देने पर वह element अपने parent element की float value लेता हैं।

1) float: left;

<html>
<head>
<style>
#divone {
border: 1px solid blue;
height: 100px;
width: 100px;
float: left;
}
#divtwo {
border: 1px solid green;
height: 100px;
width: 100px;
float: left;
}
</style>
</head>
<body>
<div id =“divone”>Box 1</div>
<div id=“divtwo”>Box 2</div>
</html>


2) float: right;

<html>
<head>
<style>
# divone {
border: 1px solid blue;
height: 100px;
width: 100px;
float: right;
}
</style>
</head>
<body>
<div id =“divone”>Box</div>

3) float: inherit;
<html>
<head>
<style>
#parent{
border: 1px solid blue;
height: 100px;
width: 100px;
float: right;
}

#box{
height: 50px;
width: 50px;
border: 1px solid green;
float: inherit;
}
</style>
</head>
<body>
<div id =“parent”>
<div id =“box”>Box</div>
</div>
</body>
</html>