css float的疑惑？

網(wǎng)上有好多float說脫離了正常的文檔流，那為啥在一個(gè)確定了寬度的父元素里面。它的子元素設(shè)置了浮動(dòng)，但是即使子元素很多，他也無法擺脫父元素的包裹，會(huì)進(jìn)行自動(dòng)換行，依舊存在這個(gè)父元素里面，這不是和脫離文檔流有矛盾嗎？

<!DOCTYPE html>
<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>價(jià)格低到高</li>
 <li>價(jià)格高到低</li>
<li>綜合排序</li>
    <li>銷量排序</li>
    <li>價(jià)格低到高</li>
    <li>價(jià)格高到低</li>

</ul>
</body>
</html>
CSS樣式---------------
.parent{
width:500px;
background:red;
height:200px
}
.parent li{
float:left;
list-style:none;
background:green;
margin-left:20px;
}

運(yùn)行結(jié)果

有沒有大神指點(diǎn)一下，感覺有點(diǎn)蒙圈，

回答

編輯回答

入她眼

@hfhan 說的正確，float脫離了文檔流，但沒有脫離文本流
以下是官方定義 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.

2018年9月12日 15:11

編輯回答

風(fēng)清揚(yáng)

CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和定位

脫離文檔流的意思是不再在文檔流中占據(jù)頁面空間，盒模型的定義也發(fā)生了改變，比如寬高自適應(yīng)、變成塊級(jí)元素等

脫離文檔流的有float，position的absolute和fixed，其中float脫離文檔流，但未脫離文本流

脫離文檔流的元素的定位基于正常的文檔流，但定位規(guī)則各不相同，float受限于父元素寬度，absolute相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位，fixed相對(duì)于瀏覽器窗口進(jìn)行定位

2018年9月11日 10:52

編輯回答

孤島

float實(shí)際上是半脫離文檔流，所以還是會(huì)受到父元素寬度的限制，再加上貼靠原理，換行顯示

2018年7月6日 05:44

編輯回答

冷咖啡

“脫離文檔流”與“依據(jù)父元素計(jì)算位置和尺寸”不構(gòu)成互斥關(guān)系。前者關(guān)注的是該元素與流內(nèi)其它元素的關(guān)系；后者關(guān)注的是該元素位置和尺寸的計(jì)算。前者會(huì)改變后者的計(jì)算方式。但規(guī)范要求–按你的說法–計(jì)算依然受限于父元素，這也是不矛盾的。

2017年8月19日 06:13

編輯回答

憶往昔

你這只是錯(cuò)覺吧，父元素設(shè)置了高度，當(dāng)然顯示這么高，子元素還是按照它自己的方式排列，不能因?yàn)楦冈卦O(shè)置了高度就覺得父元素包裹了子元素

2017年5月8日 12:26