Become Wordpress Professional - Your Ultimate Wordpress Guide

Wednesday, 13 March 2013

CSS Concepts of Floating Elements

Any discussion on the positioning elements would be incomplete without mentioning floating. Floating is by far the most popular CSS layout technique. However, it’s also one that many new web designer struggles with. That’s because, how the technique works changes, based upon the relationship of the elements that are being floated. Let's take closer look at floating and how it works.

What is Float?

So what’s a float? Essentially it’s an element that is shifted to the right or the left of its current position. You assign floating, logically enough, by using the float property. You can use the left , right , none or inherit keyword to define the position of the float

Here is how it works. Remember that in the normal document flow, block level elements are simply stacked one on top of another. They are commonly referred to as boxes and that is actually a really good way of thinking about them.



When you float an element, it moves as far over it can either to the right or to the left depending upon the property that has been assigned to it. The elements below it then moves up to occupy the space that the floated element used to occupy. In the sense floating elements removes it from normal document flow.

As you can see, floating element to the right allows the content blow it to move beside it. It is pretty easy way to create a two column layout but you can probably guess there's lot more to float then just this.



For example, let's look at what happens when you float an element to the left. As default element alignment is to the left edge of their containing element, so if you float one of those top boxes to the left, it doesn't appear to move at all, since it is already aligned to the left of the page. However, it's still remove from the normal document flow and that means the elements below it would move up to occupy the space what they see as an empty space. The result of the elements would actually go underneath the floated element, at least partially.



You see individual parts of an element will react differently to floated elements. To best demonstrate this lets look at an other example. Let's say we have an image contained within a paragraph.



If you would float the image to the left, it looks as if the paragraph is wrapping around the image instead of going underneath it. It's kind of Weird. The truth is what we are seeing here is inline boxes of lines of those text, react to floated elements, inline boxes such as the line of the text within the paragraph will wrap around the floated elements if they have enough room.



Now if the paragraph have the background color you would still see the paragraph itself did indeed moves up and underneath the image



Once you've learned the in's and out's of floats, you can do all kinds of cool things with them. For example, if you float the series of elements to the same side, like these series of boxes that have all been floated to the left. You end up with the horizontal display of elements. This technique is used frequently to transform a list of links into horizontal menu, you can also use float to create multiple column of elements, a drop cap in paragraphs, product description details in a whole lot more.



I also wanna make sure that we've talked about clearing floats in CSS using Clearfix. If you remember from earlier, I discussed how floated elements effect all the elements blow it in normal flow. For example create a two column layout but floating one containing element to the left and one to the right as you see here so we got content element floated to the right we have sidebar element floated to the left



However, based on the way floats work, any remaining content of the page like our footer here will move up and underneath the floated elements

By using the clear property you can tell the browser to stop floating elements and go back to normal document flow. The clear property can be set to prevent elements from floating to left or right of an element or set to both so you can use lelt, right or both values to prevent any float from effecting the clearing element.

However, based on the way floats work, any remaining content of the page like our footer here will move up and underneath the floated elements


By using the clear property you can tell the browser to stop floating elements and go back to normal document flow. The clear property can be set to prevent elements from floating to left or right of an element or set to both so you can use left, right or both values to prevent any float from effecting the cleared element. The best way to think of clearing is just think it as your way of telling browser, HEY THANKS! but i need to go back to the staking elements again. Obviously mastring, how browser handle floated element require little bit of time.
You'll need to become comfortable.
  • How floated elements affect their parent elements
  • How clearing works
  • How margins work with floated elements and static elements
  • How the width of parent element affect the floating ability of nested elements.

0 comments:

Post a Comment

Please Avoid Spamming. Comments will be moderated before they are published.