How to explain CSS Float in general language (not Programming) ? Is there any real life example to take a example to explain CSS Float?
Is there any Slideshow in very simple way to explain float?
+5
A:
Explain it exactly like it sounds :)
It's called float because an element "floats" like a boat does. Consider the rest of the content water and the object a boat...the object displaces a certain amount of space and the water (other content) wraps around it. In the few times I've had to convey this property's meaning, this was the explanation that "got it across".
That doesn't cover the cross-browser quirks like IE floats, but for a general explanation, it works. For a complete explanation, I still think this is the best resource out there: simple tutorials on CSS floats.
Nick Craver
2010-06-08 09:59:23
Couldn't have said it better myself.
Sam152
2010-06-08 10:00:20
then how to explain Flow? Normal and Out of flow?
metal-gear-solid
2010-06-08 10:02:49
@metal-gear-solid: You mean with respect to positioning, e.g. absolute being out of the normal flow? Or only in context of float-flow? There are a few properties that affect flow.
Nick Craver
2010-06-08 10:03:30
For IE floats, you could say that the boats have sails, and they can be moved randomly by the wind :)
Daniel Vassallo
2010-06-08 10:03:40
@Nick - and what is real world example for positioning?
metal-gear-solid
2010-06-08 10:06:59
@metal-gear-solid: That one's not as simple IMO, I would say "fixed" is "fixed", right where your eye sees it, "absolute" is in an "absolute" spot from the top/left (with respect to *something*), "relative" is "relative" to where it normally would be, "static" is "steady", in-the-flow, and "inherit", well, inherits.
Nick Craver
2010-06-08 10:14:25
@- For float - can we also take a example of Slope way? everything will go where slope goes
metal-gear-solid
2010-06-08 10:15:23
@metal-gear-solid: Not really, in terms of flow, the same boat example applies, in most cases the element will "float" to the top (and right or left after that) of the container it's in...notice I didn't say page, but the container it's in. If you're dealing with IE and want to float something left and something right in the same container (we'll call it a lake), you need to float both boats in the CSS explicitly, or one's taking on water, because IE's a special kid.
Nick Craver
2010-06-08 10:19:19
@Nick-Are you talking about all IE version till 8?
metal-gear-solid
2010-06-08 10:21:22
@metal-gear-solid: Correct, IE8 handles this correctly, when it's not in IE7 rendering mode that is.
Nick Craver
2010-06-08 10:27:14
@Nick - For what purpose `Float` were created?
metal-gear-solid
2010-06-08 11:39:30
@metal-gear-solid: To float things, like anything in the spec there's no one reason, there are dozens...otherwise it wouldn't have made it into the spec. Any time you want to position an element and have things flow around it, you can float, any example of this is a valid reason for it. I often use it when I need something all the way to right right for some reason, it the simplest way to do it across many layout scenarios (though I have the luxury of not caring about IE6, some may not).
Nick Craver
2010-06-08 11:57:22
I mean float were made for Layouts or developer found this way? and What was the purpose to made Positioning?
metal-gear-solid
2010-06-08 12:06:58
@metal-gear-solid: You'll have to ask whoever added it to the spec, all of this was for layouts, I know how I use it today, but that's a very different browser ecosystem than when these things were added to CSS, what the reasoning of the original authors was? I have no clue.
Nick Craver
2010-06-08 12:12:12