Float
Float property рдХреА рдЗрди рдкрд╛рдБрдЪ рдореЗрдВ рд╕реЗ рдХреЛрдИ рдПрдХ value рд╣реЛ рд╕рдХрддреА рд╣реИрдВ тАУ
- left :- рдпрд╣ value рджреЗрдиреЗ рдкрд░ element left side рдореЗрдВ float рд╣реЛрддрд╛ рд╣реИрдВред
- right :- рдЗрд╕рд╕реЗ element right side рдореЗрдВ float рд╣реЛрддрд╛ рд╣реИрдВред
- none :- рдпрд╣ value рджреЗрдиреЗ рд╕реЗ element float рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИрдВ рдмрд▓реНрдХрд┐ page рдХреЗ normal flow рдХреЗ рд╣рд┐рд╕рд╛рдм рд╕реЗ show рд╣реЛрддрд╛ рд╣реИрдВред
- initial :- рдпрд╣ keyword рдХрд┐рд╕реА рднреА CSS property рдХреА default value set рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП use рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ|
- 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>
