Css float's doubts?
there are a lot of float on the Internet saying that they are out of the normal document stream, so why is it in a parent element with a determined width? Its child element is set to float, but even if there are many child elements, it can not get rid of the parcel of the parent element, will automatically wrap the line, and still exists in the parent element, isn"t it contradictory to leaving the document stream?
< html >
< head >
< meta charset= "utf-8" >
< meta name= "viewport" content= "width=device-width" >
< title > JS Bin < / title >
< / head >
< body >
< ul class="parent" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
< / body >
< / html >
CSS style-
.parent {
width:500px;
background:red;
height:200px
}
.parent li {
float:left;
list-style:none;
background:green;
margin-left:20px;
}
run results
can you give me some advice? I feel a little blurred.
CSS has three basic positioning mechanisms: normal stream, floating and positioning
breaking away from the document flow means that the page space is no longer occupied in the document flow, and the definition of the box model has changed, such as adaptive width and height, becoming block-level elements, etc.
float,position 's absolute and fixed, are separated from the document stream, where float is separated from the document stream, but not from the text stream
the positioning of elements that leave the document flow is based on the normal document flow, but the positioning rules are different. Float is limited by the width of the parent element, absolute is positioned relative to the first parent element other than static positioning, and fixed is positioned relative to the browser window
.
@ hfhan is correct. Float is separated from the document stream, but not from the text stream
the following is the official definition https://www.w3.org/TR/CSS2/vi.
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there is a line box, the outer top of the floated box is aligned with the top of the current line box.
If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
this is just an illusion, the parent element set the height, of course, display so high, child elements or according to its own way of arrangement, not because the parent element set the height of the parent element wrapped around the child element
"away from the document stream" and "calculate the position and size based on the parent element" does not constitute a mutually exclusive relationship. The former focuses on the relationship between the element and other elements in the flow, while the latter focuses on the calculation of the position and size of the element. The former will change the way the latter is calculated. But the specification requires-as you put it-that computation is still limited by the parent element, which is not contradictory.
float is actually semi-detached from the document stream, so it is still limited by the width of the parent element, coupled with the principle of attachment, the line wrapping shows
.
