Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Does 'clear' apply to inline elements?

    Code:
    <style>
    
    .style1  li { width:220px;
      float:left;
    }
    
    
    </style>
    
    <ul class="style1">
    	<li><input type="checkbox" value="1">Value</li>
    <li><input type="checkbox" value="1">Value</li>
    </ul>
    <span style="clear: both;">Hello</span>
    With the above code the span doesn't clear the list. But it does if I make it a block element.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Yes, clear doesn't apply to inline elements. Well, .. it does officially, but because of the way inline elements work it won't have the desired effect.

    In the demonstration below the span element won't pop-up above the UL if there isn't enough room for it. Try increasing the width of the DIV to see the effect.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>Page Title</title>
        <style type="text/css">
            .style1 {
                width: 100px;
                float:  left;
                outline: 1px solid blue;
            }
            div {
                width: 100px;
            }
        </style>
    </head>
    
    <body>
    <div>
    <ul class="style1">
    	<li><input type="checkbox" value="1">Value</li>
    <li><input type="checkbox" value="1">Value</li>
    </ul>
    <span style="clear: both;">Hello</span>
    </div>
    
    </body>
    </html>
    But you don't really want to do this; just use a block-level element (P or DIV).

    Added: Actually, the clear:both has no effect on the in-line element. The W3 says you can apply it to in-line elements but it's ineffectual.
    Last edited by AndrewGSW; 01-18-2013 at 08:12 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Oct 2011
    Posts
    24
    Thanks
    1
    Thanked 0 Times in 0 Posts
    'Clear' on an inline element is allowed but it has no effect. Is there a theoretical explanation as to why it has no effect?
    Last edited by IanIan; 01-21-2013 at 12:11 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •