SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    433
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Are floated elements really removed from normal document flow?

    If floated elements are removed from the normal document flow, why do the floated elements still seem to have some kind of "parent" behavior applied to them? For example, lets say I do:

    Code:
    html, body {
    	margin: 0;
    	padding: 0;
    }
    html {
    	background: #ccc;
    }
    body {
    	width: 600px;
    	background: #fff;
    	margin: 2em auto 2em;
    }
    div {
    	margin-bottom: 1em;
    	width: 200px;
    	height: 100px;
    }
    
    .element1 {
    	background: rgb(211, 206, 61);
    	float: left;
    	margin-right: 1em;
    }
    .element2 {
    	background: rgb(85, 66, 54);
    	float: left;
    	margin-right: 1em;
    }
    .element3 {
    	background: rgb(247,120,37);
    	float: left;
    	margin-right: 1em;
    }
    </style>
    </head>
    <body>
    <p>The float property has four possible values: left | right | inherit | none<p>
    <p>Floating an element to the left or to the right will cause it to move to the left-most or right-most edge of its parent container. Floating removes the element from normal flow, and will cause elements below it to shift accordingly.</p>
    <div class="element1"></div>
    <div class="element2"></div>
    <div class="element3"></div>
    </body>
    </html>
    Although the floated elements do not fit on one line due to their widths exceeding the width of the BODY (and the container is collapsing), why do the floated elements still appear to be contrained to 600px width if they are supposedly outside normal document flow ? I thought that when someone refers to "document flow" of an HTML document, they are talking about the ENTIRE HTML document. But, if floats are parented by a BODY element, then floats are not technically removed from a normal document flow. I guess this is just semantics that I am confused about. Thoughts?

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,893
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by skunker View Post
    Although the floated elements do not fit on one line due to their widths exceeding the width of the BODY (and the container is collapsing), why do the floated elements still appear to be contrained to 600px width if they are supposedly outside normal document flow ? I thought that when someone refers to "document flow" of an HTML document, they are talking about the ENTIRE HTML document. But, if floats are parented by a BODY element, then floats are not technically removed from a normal document flow. I guess this is just semantics that I am confused about.
    Floated elements still live within the parameters defined by their parent element, ie the width available and horizontal position. They still interact with text and other elements inside that parent element (or other following elements). In that respect, they are quite different from absolutely positioned elements, which are removed from the document flow and don't interact with other elements ... but even then, if they have a positioned ancestor then they are restricted by the envelope of that ancestor and will use that as the basis for calculating size and dimension (although they can still be made to extend or exist outside that positioned ancestor).


Bookmarks

Posting Permissions

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