本帖最后由 ligxi 于 2021-4-10 14:44 编辑
这不是超出边界的问题，是因为有多余的空间，让其他浮动有地方放导致的。把外边距改大就是为了不让移动后的空间空出来。
你应该还是没看懂视频讲的，反向逆推就应该明白发生这种现象的原因。
既然知道浮动元素没空间自然向下跑，怎么想不明白有空间就会往上跑呢？
如果都设置了左浮动，那要浮动的元素是不是要看一下它的左边是不是有浮动元素呢？一开始5换行显示没问题，毕竟父宽度就那么大，前面也没空间可以放。但是当4元素的鼠标移动上去后是不是下面多出了5px的空间，此时4的右边还是放不下5的，那5肯定是另起一行的，但是4的下边是有空间，5px*232px。于是5就想既然4后面放不下，要不看看能不能在3的后面显示，此时5的宽度又刚好能放在4的下面而且不超出，于是就把5显示在了3的右边、4的下面这仅有5px空间。那么6看到5跑了，是不是就要跟着移动，但是5的右边和下边都没有空间，6同理挨个向前找，但是前面都没空间，于是6和剩下的浮动元素就只能换行显示了。
不明白？那把3元素的高度缩小，看5和6是不是都上来了。
现象还原：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid blue;
}
.box>div{
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3">3</div>
<div class="inner4" style="height: 90px;background-color: pink;">4</div>
<div class="inner5">5</div>
<div class="inner6">6</div>
<div class="inner7">7</div>
<div class="inner8">8</div>
</div>
</body>
</html>
然后还有这种现象，就是5的宽度明显是放不下了，但是前面几个浮动元素都有空间，于是5就会挨个尝试向前找浮动元素看能不能贴在后面，实在没有办法显示才会换行：
[HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 400px;
height: 400px;
border: 1px solid blue;
}
.box>div{
width: 100px;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="inner1">1</div>
<div class="inner2">2</div>
<div class="inner3" style="height: 70px;background-color: pink;">3</div>
<div class="inner4" style="height: 50px;">4</div>
<div class="inner5" style="width: 150px;">5</div>
<div class="inner6">6</div>
<div class="inner7">7</div>
<div class="inner8">8</div>
</div>
</body>
</html>
这就是视频讲的现象，还不明白我也无能为力了。
| 
发表于 2021-4-9 21:05
|
发表于 2021-4-9 21:11
