<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米</title>
<style>
* {
margin: 0;
padding: 0;
}
body{
margin-top: 30px;
}
/* 设定父盒子初始框架定位 */
.father {
width: 1226px;
height: 624px;
/* background-color: pink; */
margin: auto;
}
.left {
width: 232px;
height: 617px;
/* background-color: purple; */
float: left;
background-image: url(image/left234_615.jpg);
background-size: auto;
border: 1px solid #eee;
border-top: 6px solid black;
}
.left:hover {
box-shadow: 0 5px 10px #666;
margin-top: -5px;
}
.right {
width: 992px;
height: 615px;
/* background-color: skyblue; */
float: right;
}
.right li {
list-style: none;
height: 299px;
width: 232px;
float: left;
background-color: white;
margin-left: 12px;
margin-bottom: 12px;
text-align: center;
border: 1px solid #eee;
border-top: 6px solid black;
}
.right li:hover {
box-shadow: 0 5px 10px #999;
margin-top: -5px;
margin-bottom: 17px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">
</div>
<ul class="right">
<li><img src="image/tel.png" alt="">1</li>
<li><img src="image/tel.png" alt="">2</li>
<li><img src="image/tel.png" alt="">3</li>
<li><img src="image/tel.png" alt="">4</li>
<li><img src="image/tel.png" alt="">5</li>
<li><img src="image/tel.png" alt="">6</li>
<li><img src="image/tel.png" alt="">7</li>
<li><img src="image/tel.png" alt="">8</li>
</ul>
</div>
</body>
</html>
本帖最后由 ligxi 于 2021-4-10 14:44 编辑
juzip 发表于 2021-4-10 13:51
看了啊，但我重新调试了父盒子的宽高，保证边距上移5px不超，还是会挤下去，换成2个独立父盒子，每个放4 ...
这不是超出边界的问题，是因为有多余的空间，让其他浮动有地方放导致的。把外边距改大就是为了不让移动后的空间空出来。
{:17_1050:}
你应该还是没看懂视频讲的，反向逆推就应该明白发生这种现象的原因。
既然知道浮动元素没空间自然向下跑，怎么想不明白有空间就会往上跑呢？
如果都设置了左浮动，那要浮动的元素是不是要看一下它的左边是不是有浮动元素呢？一开始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是不是都上来了。
现象还原：
<!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就会挨个尝试向前找浮动元素看能不能贴在后面，实在没有办法显示才会换行：
<!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>
这就是视频讲的现象，还不明白我也无能为力了。
{:301_999:}
juzip 发表于 2021-4-9 21:11
被逼无奈只能用
4
然后设定第四个li 不上移,就不影响整体,实在不明白,也不存在,超过界限,父盒子的 ...
宽度不够 所以就这样子了
.right li:hover {
box-shadow: 0 5px 10px #999;
position: relative;
top: -5px;
/* margin-top: -5px; */
}
Su、 发表于 2021-4-9 21:18
.right li:hover {
box-shadow: 0 5px 10px #999;
position: relative;
看了下 是因为margin-top导致的 hover效果加个定位，然后更改top实现这个效果就好了
juzip 发表于 2021-4-9 21:22
你只的是哪个宽度,right的宽度,还是father的宽度,还是li的宽度,我都调整过加大宽度,还是会跳出去!
不是宽度的原因 看我上面的解释
.right li:hover {
box-shadow: 0 5px 10px #999;
position: relative;
top:-5px;
不用谢