For designing websites, you need to care about the theories you are going to use. What if the theories could be innovative, attractive and cheaper? What if they make the website look unique and different from all?

Floating theory in Advanced CSS refers to a way in which an element floats around from one side to another, up and down, so that they can prove their omnipresent nature in the website. They make the website unique. Though the floats are often blamed for sailing images/ texts throughout the website, causing unnecessary readability and usability difficulties, but the truth often differs from the notions.

• When an element is floated around, it becomes a block box. The block box can be shifted from left to right, from up to down and vice versa. Initially a floated box is placed in sync with the normal flow, but then extracted out and shifted to the left or right side. So texts and images can flow down from the right side of left-floated box and up-down the left side of right-floated box. You can also cluster a host of floats beside one another.
• Floated items should always be set with a width [exception when the width is directly applied to an image]. If the width is not set for these floated items, the results can be disastrous, because technically floated elements without a proper definition usually shrinks to the widest element within it. This element can either be a sentence, a word or a single character – but the results might vary from one browser to another.
• Borders, background colors and background images also play an important part in floating theory. As the content gets wrapped around a floated element, the borders and background images/colors extend from underneath the content. In case you do not want the elements below the floated element to wrap round the content, you can apply the clear property concept to the following element using codes like “clear: left”, “clear: right” or “clear: both”.
• It will not affect Block elements that reside above the floated elements. But elements that are below will wrap around the floated element. For example, the code would include – “float: left” element with block level element above and “float: left” element with element below.