float: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

The float property creates a floating box.

When you apply this property to the LI element, the horizontal list can be created.


li {
float: left;
}
Property Value Explanation
float left the box floats to the left
right the box floats to the right

Example


<html>
<head>
<title>TAG index</title>

<style type="text/css">

ul {
padding: 0;
margin: 0;
list-style-type: none;
}

li {
float: left;
width: 150px;
margin-right: 5px;
padding: 2px;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
}

</style>

</head>
<body>

<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>

<p style="clear: left;">--- Clears the left float ---</p>

</body>
</html>
Output
  • First
  • Second
  • Third

--- Clears the left float ---