Float and Clear Control under CSS : clear « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. clear

Float and Clear Control under CSS

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>HTML/XHTML:  &raquo; Float and Clear Control under CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<style type="text/css">

p.aligned-right { border-style: solid; border-width: 1px; height: 100px; width: 100px; background-color: yellow; float: right; }
.clearright { clear:right; }

</style>


</head>
<body>
<div class="content">
  <div>This is some dummy text.
  <p class="aligned-right">A floating region</p>
  Here is some more text.
  <br class="clearright" />
  This text should appear after the floating section.
  </div>
</div>
</body>
</html>








Related examples in the same category

1.'clear' Example
2.clear: left with float: left
3.clear: left with float right
4.clear: both
5.clear both
6.clear left
7.clear left only
8.Float Clearing
9.Clearing floated content
10.The clear property cancels the effects of the float property, and can prevent wrapping from taking place.
11.clear: both;