Float

CSS allows you to "wrap" an element around other. You can do this with the float property.
This property shifts an item horizontally, left or right from its original placement, leaving a blank space in the opposite direction, which will be filled by the next HTML element. But the elements before the floating element will not be affected.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing parent.
If you place several floating elements after each other, they will float next to each other if there is room.
  - Values:   - Syntax:   - Example (Two <div> tags, first with float:right, the second with float:left, and a text content after them.):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>float</title>
 <style type="text/css"><!--
 #dv1 {
  width: 200px;
  float: right;
  border: 2px solid green;
 }
 #dv2 {
  width: 200px;
  float: left;
  border: 2px solid blue;
 }
 --></style>
</head>
<body>
 <div id="dv1">DIV 1, with float: right;</div>
 <div id="dv2">DIV 2, with float: left;</div>
 Text content after the floated DIVs.
</body>
</html>
The first DIV is pushed to the right, leaving a blank space to its left. The second div is pushed to the left in that space, leaving another empty space in its right side, that will be filled by the next item, if fits (here a text content).
  - Result:
DIV 1, with float: right;
DIV 2, with float: left;
Text content after the floated DIVs.

- Absolutely positioned elements ignores the float property.

Clear

The clear property has an action similar to <br> HTML tag that moves to a new row the next element.
When an element is floated it leaves an empty space in the oposite direction. With the "clear" property can be avoided the filling of that blank space by the next item.
The clear property is used to insert a break when encountering a new section of the layout to stop the wrapping effect. It specifies which sides of an element other floating elements are not allowed.
  - Values:   - Syntax:   - Example (A new version of the example above, here is added the clear:right in the "#dv2" selector and a <br /> tag with clear:both before the text content):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>clear</title>
 <style type="text/css"><!--
 #dv1 {
  width: 200px;
  float: right;
  border: 2px solid green;
 }
 #dv2 {
  clear: right;
  width: 200px;
  float: left;
  border: 2px solid blue;
 }
 --></style>
</head>
<body>
 <div id="dv1">DIV 1, with float: right;</div>
 <div id="dv2">DIV 2, with float: left;</div>
 <br style="clear:both" />
 Text content after the floated DIVs.
</body>
</html>
As you can see, the clear property stops the wrapping effect.
  - Result:
DIV 1, with float: right;
DIV 2, with float: left;

Text content after the floated DIVs.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag is indicated to be used as container for menu with navigation links in Web site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Which CSS property shifts an item horizontally to the left or right of where it was?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Click on the Math object method which returns x, rounded downwards to the nearest integer.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicate the PHP function which returns the number of characters in string.
mb_strlen() count() stristr()
$str = "string with utf-8 chars åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 30
CSS Float and Clear

Last accessed pages

  1. Chaining Static and Public Methods in PHP (2011)
  2. JavaScript Course - Free lessons (14815)
  3. PHP MySQL - using MySQLi (8250)
  4. Get Duration of Audio /Video file before Upload (5808)
  5. Insert, Select and Update NULL value in MySQL (26455)

Popular pages this month

  1. Read Excel file data in PHP - PhpExcelReader (321)
  2. PhpSpreadsheet - Read, Write Excel and LibreOffice Calc files (265)
  3. Register and show online users and visitors (253)
  4. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (244)
  5. Insert, Select and Update NULL value in MySQL (157)