1

I have seen a lot of people using the following styles on elements:

float:left; width:100%;

What is the point of this as I thought float is so that block level elements can sit next to each other (which they won't if they are 100% wide)

Is this floating left something that is taught in schools or on a website somewhere as I have also seen people include * {float:left;} in their stylesheets.

  • Interesting. I've never seen this--are these experienced CSSers? – landons Jun 04 '13 at 14:01
  • I would have to say they're probably not experienced if they are doing this - unless there is some reason for it that I'm missing (in which case they are probably more experienced than me!). but It's appearing more and more - I just came across it a few times on here too whilst I was looking at some of the css questions –  Jun 04 '13 at 14:04
  • 1
    the only difference i know with float+100% width is that the box does not extend its parent container. to make the parent wrap the floating div you need an element with the clear attribute below the floating div – x4rf41 Jun 04 '13 at 14:04
  • 1
    I've also Never seen code like this! Do you have a link where we can See this code in use? – DominikAngerer Jun 04 '13 at 14:04
  • It came up in this question: http://stackoverflow.com/questions/16895578/adding-facebook-like-button-breaks-the-div-tag#comment24422955_16895578 and I have taken on many websites that also use it –  Jun 04 '13 at 14:06
  • 1
    Especially using `* { float: left; }` is extremely useless and contraproductive. – kleinfreund Jun 04 '13 at 14:06
  • @kleinfreund, that's what I thought too –  Jun 04 '13 at 14:07
  • 1
    Perhaps to just simply collapse it? observe this fiddle: http://jsfiddle.net/LbyjX/ vs http://jsfiddle.net/LbyjX/1 – Joseph Marikle Jun 04 '13 at 14:07

3 Answers3

0

When you float things, other things about how they are handled are also changed. For instance, look at this fiddle:

http://jsfiddle.net/RnP2V/

Notice how the div containing the floated element collapses while the the other doesn't.

EDIT:

I updated the fiddle with an example of how to keep the parent from collapsing using overflow:

http://jsfiddle.net/RnP2V/1/

MaX
  • 1,765
  • 13
  • 17
  • you see with this I would have thought that floating everything would have made things harder as you would have to clear more elements to get the box model correct or stop it from collapsing –  Jun 04 '13 at 14:09
  • Yes, I haven't had a case at work yet where `float`ing everything would be better than `float`ing just what needed to `float`. But I guess some people have. – MaX Jun 04 '13 at 14:11
  • you have said, and i quote: `I have seen a lot of people using the following styles on elements`. so can you please show us some of those examples. because like everyone else here, i dont see any advantage doing this (besides the collapsing, if you want that) – x4rf41 Jun 04 '13 at 14:11
  • @x4rf41 They are mainly random sites that I have had the pleasure of taking over - most of which I have re-skinned so unfortunately I have no present examples but if you look through the css questions on here you will notice a lot of people randomly float stuff left (especially begginers) which is what led me to believe there may be some sort of tutorial telling people this was a good idea –  Jun 04 '13 at 14:17
0

This looks like an adoption of the "Float Nearly Everything" (fne) method: http://orderedlist.com/blog/articles/clearing-floats-the-fne-method/ (October 2004)

The reason why someone would want to do this is to contain their floats without having to clear them. Floating an element introduces a new Block Formatting Context, and thus will contain any descendant floating elements. Read: https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context and How does the CSS Block Formatting Context work?

I would recommend avoiding floating something that you don't specifically want to position next to something else, and seek a different method for containing floats, of which there are several.

Check out this article for a few of the best options (i have seen so far): http://colinaarts.com/articles/float-containment/

Excerpt from the article mentioned above: 

#foo {
  overflow: hidden; /* For modern browsers and IE7 */
  display: inline-block; /* For IE6 */
}

#foo { display: block; } /* For IE6 */
Community
  • 1
  • 1
xec
  • 17,349
  • 3
  • 46
  • 54
-1

This is indeed baffling, although not as straightforwardly silly as you comment makes out:

I thought float is so that block level elements can sit next to each other (which they won't if they are 100% wide)"

Floated elements don't sit in the regular document flow - rather a floated box is laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Thus, any floated element would take it's 100% width from its parent element, not the element it appears within once it's been repositioned.

Specifying width:100% is still completely redundant, since floats are block elements and as such do not, in most cases, need 100% width specifying.

FarmerGedden
  • 1,162
  • 10
  • 23
  • 4
    Once you float an element it does not automatically have 100% width, so you DO need to specify `width:100%`: http://jsfiddle.net/p867t/ – MaX Jun 04 '13 at 14:41