Float and clear
The float property is very simple to understand, but often misused. It simply tells an object to "float" or move to the left or right. Subsequent objects will then flow around the floated element. It was originally meant to flow text around images, but it has become essential in creating fixed and fluid layouts using CSS. Let's use it first as it was meant to be: to flow text around an element.
CSS
#container { margin: 100px; } .square { position:relative; width: 100px; height: 100px; margin: 20px 20px 10px 0px; float: left; background-color: #ccc; } h1 { color: #999; margin-bottom: 0px; } p { line-height: 1.5em; color: #555; } HTML <body> <div id="container"> <h1>Float Left</h1> <div class="square" ></div> <p>Float property is important for us to display our page as designed. This is an example for float left. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p> </div> </body> |
Float LeftFloat property is important for us to display our page as designed. This is an example for float left. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. |
The clear property is used in conjunction with the float property. Adding the clear property to an element allows you to determine how the element works with a preceding floated element. The clear property has the following values: left, right, both, and none.
For creating layouts, you can see how important the clear property can be. You will often hear web designers ask each other "Did you remember to clear your floats?" It is a common mistake, but can lead to much time spent troubleshooting your work.
For creating layouts, you can see how important the clear property can be. You will often hear web designers ask each other "Did you remember to clear your floats?" It is a common mistake, but can lead to much time spent troubleshooting your work.
Float <div> boxes
overflow:auto
There is a small problem caused by float element. If a <div> layer consists of only float elements, the div layer is considered 1px in height. To avoid this, you can use:
overflow:auto;
overflow:auto;