Skip to main content

Float and Clear


Introduction:
This is the eighth part in my CSS Styling tutorials, in which I will be covering floating.

What is Float?
Float is used to make an element act as a lightweight object which can fit in white space and therefore removes its aligning to center and such like.

The use of float is to essentially make an element inline display with other elements which are already inline displayed or also have a float. Float can be used in places such as navigation bar links, gallery image thumbnails and columns of information.

Clear:
Clear is also used in conjunction with Float which can be used to specify where other floating elements are not allowed. For example; if you have three images floating left, the second image can clear right meaning the third image would be forced underneath.

Structure:
float: {type};
clear: {type};

Example:

  1. float: left;

  1. clear: right;

Values - Float:
left - Floats the element to the left.
right - Floats right.
none - Removes all float values.
inherit - Specifies that the value of the float property should be inherited from the parent element.

Values - Clear:
left - Clears the left side of the given element.
right - Clears the right side of the given element.
both - Clears both sides.
none - Removes all clear values.
inherit - Specifies that the value of the clear property should be inherited from the parent element.

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <style>
  4. .left {
  5. color: #000;
  6. width: 300px;
  7. height: 100px;
  8. float: left;
  9. // Floats left.
  10. }
  11. .clear {
  12. color: #000;
  13. width: 300px;
  14. height: 100px;
  15. clear: both;
  16. // Clears both sides to force the rest of the divs underneath.
  17. }
  18.  
  19. .right {
  20. color: #000;
  21. width: 300px;
  22. height: 100px;
  23. float: right;
  24. // Floats right.
  25. }
  26.  
  27. .none {
  28. color: #000;
  29. width: 300px;
  30. height: 100px;
  31. float: none;
  32. // Removes float.
  33. }
  34. </style>
  35. </head>
  36. <body>
  37. <div class='left'>Floating left...</div>
  38. <div class='clear'>Clearing...</div>
  39. <div class='right'>Floating right...</div>
  40. <div class='none'>All floats are removed.</div>
  41. </body>
  42. </html>

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.