How does CSS float work when applied to an "ul" element

Question

Can someone explain the following code from a w3school example please?

<html>
  <head>
    <style>
      ul {
        float:left;
        width:100%;
        padding:0;
        margin:0;
        list-style-type:none;
      }
      a {
        float:left;
        width:6em;
        text-decoration:none;
        color:white;
        background-color:purple;
        padding:0.2em 0.6em;
        border-right:1px solid white;
      }
      a:hover {
        background-color:#ff3300;
      }
      li {
        display:inline;
      }
    </style>
  </head>

  <body>
    <ul>
      <li><a href="#">Link one</a></li>
      <li><a href="#">Link two</a></li>
      <li><a href="#">Link three</a></li>
      <li><a href="#">Link four</a></li>
    </ul>

    <p>In the example above, we let the ul element and the a element float to the left.
       The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
       The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
       We add some colors and borders to make it more fancy.
    </p>
  </body>
</html>

When I removed the float:left;(line 5) which is applied to the <ul> element, the text inside <p> tag just went to the right of the list.

But, what is float:left doing here? Judging from the result, when applied, the <p> tag after the <ul> element started a newline. Can someone explain this?

I wouldn't use w3schools as a learning resource. It's not very good - http://www.w3fools.com/ — Pete, May 13 '14 at 10:32
@Pete - w3fools isnt that great either: http://meta.stackexchange.com/questions/120621/w3fools-alternatives — SW4, May 13 '14 at 10:48
Wow, thanks Pete, I was totally shocked by your comment, I mean I have found a few mistakes on that site, but no way had I came up with the idea that it was not very good. I have been using it as a reference since I took charge of a site from a colleague who recommend w3schools to me and started to learn about web development about 1 year ago. And yes I also bookmarked it... now I have to check out w3fools ... @Pete — Evelyn1986, May 13 '14 at 10:50
@SW4 interesting - I shall stop using that as a reference but I stand by my verdict about w3schools. I always wondered why people floated 100% width elements and now I know - they are being taught to do it by a really bad resource. Evelyn, the answer in [this question](http://stackoverflow.com/questions/16919832/css-floatleft-usage) has some interesting articles about css float usage — Pete, May 13 '14 at 11:03

score 2 · Accepted Answer · answered May 13 '14 at 10:38

This is called "The Great Collapse" - If a parent element contains nothing but floated elements, the height of it would literally collapse to nothing.

In the code above, all the a tags have been floated left, which collapses the li element to nothing which in turn collapses the parent ul element. This causes the following p tag to wrap itself around and start after the last link.

Remove the float:left; from the a tags and you will see the difference.

Source: http://css-tricks.com/all-about-floats/

score 1 · Answer 2 · answered May 13 '14 at 10:39

First of all please don't w3schools.com. They have got some errors which they refused to correct. Use mozilla MDN documentation instead.

float:left will allow the next element to wrap text around the current element starting from extreme possible left side. So when you are removing it, you text is not getting wrapped around the <ul> element.
A good reference : http://css-tricks.com/all-about-floats/

<ul> leaves a line break because its a block level element. Block level elements possess property of leaving line breaks because of margins https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

score 0 · Answer 3 · answered May 13 '14 at 10:41

0

when uses display: inline, on this case <li> tag, the container transform to in line element, therefore only fill the necesary space. with float you use all block, and the other only is the position.

answered May 13 '14 at 10:41

TiGreX

1,602
3
26
41

How does CSS float work when applied to an "ul" element

3 Answers3