The CSS float property is used for positioning contents to left, right or none. Also image can be floated left or right.
CSS Float Property Values
- left : It is used to float the element to the left.
- right : It is used to float the element to the right.
- inherit : It is used to inherit this property from its parent element.
- none: It specifies that the html element is not floated.
Syntax :
<style>
div_left
{
float:left;
}
div_right
{
float:right;
}
div_none
{
float:none;
}
div_inherit
{
float:inherit;
}
</style>
Lets see example for float to understand how it works as below
Example :
<html>
<head>
<title>Learn Css float property tutorials by aryatechno</title>
<style>
.box {
width: 35%;
height: 100px;
padding: 10px;
background-color: #0000FF;
border:#000000 solid 1px;
color:#FFFFFF;
float:right;
}
</style>
</head>
<body>
<h2>Applied right float for below example.</h2>
<div class="box">
Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.Learn Css float property tutorials.
</div>
<div class="box">
Look at example for Css float property. Look at example for Css float property. Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.Look at example for Css float property.
</div>
</body>
</html>
Comments