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:
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?