css float的疑惑？

发布于
2018-09-11

网上有好多float说脱离了正常的文档流，那为啥在一个确定了宽度的父元素里面。它的子元素设置了浮动，但是即使子元素很多，他也无法摆脱父元素的包裹，会进行自动换行，依旧存在这个父元素里面，这不是和脱离文档流有矛盾吗？

<!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>价格低到高</li>
 <li>价格高到低</li>
<li>综合排序</li>
    <li>销量排序</li>
    <li>价格低到高</li>
    <li>价格高到低</li>

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

运行结果

有没有大神指点一下，感觉有点蒙圈，

css html

阅读 2.3k

5 个回答

hfhan

✓ 已被采纳

CSS 有三种基本的定位机制：普通流、浮动和定位

脱离文档流的意思是不再在文档流中占据页面空间，盒模型的定义也发生了改变，比如宽高自适应、变成块级元素等

脱离文档流的有float，position的absolute和fixed，其中float脱离文档流，但未脱离文本流

脱离文档流的元素的定位基于正常的文档流，但定位规则各不相同，float受限于父元素宽度，absolute相对于 static 定位以外的第一个父元素进行定位，fixed相对于浏览器窗口进行定位

桃子_Lisa

1.1k119

发布于
2018-09-12

@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.