li里面div .number设置浮动，为什么dl不设置float（要浮动一起浮动）

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

# 尝试过的解决思路和结果

# 粘贴全部相关代码，切记添加代码注释（请勿截图）

在这里输入代码，可通过选择【代码语言】突出显示

siegelions 2020-12-02

源自：浮动与定位 4-9 小慕医生项目开发（6）

收起

2回答

好帮手慕久久 2021-03-16 18:39:51

同学你好，解答如下：

dl标签是被div.number压盖的：

而dl的内容之所以在div.number右侧显示，是因为dl的宽度比div.number大，虽然dl被div.number遮住一部分，但是右侧还有剩余空间：

所以dl的文字、内容就会优先在dl右侧剩余空间内显示。

而同学的例子中，.box1、.box2的宽度是一样的，二者重叠在一起后，.box2右侧没有剩余空间，所以.box2的内容，就无法在.box2右侧显示，而是在.box1下面显示：

可以将.box1的宽、高调小看下:

a）

b）

这里比较特殊，同学看下效果，了解一下即可。

祝学习愉快！

收起回答

好帮手慕久久 2020-12-02 13:50:06

同学你好，视频中这里的样式，虽然效果正确，但是不太规范。应该像同学所说的那样，dl也要设置一下浮动。由于css样式很灵活，书写方式不唯一，所以很多情况下，代码即使不规范，也能实现效果。但是建议同学规范点写，即也给dl设置浮动。如果不确定自己写的是否对，可以把相关的代码粘贴出来，老师帮你检查。

祝学习愉快！

收起回答

weixin_慕斯卡6086637 #1

老师， dl没有设置浮动，那为什么不会被浮动的元素压盖了(脱离标准文档流)，而是在后面显示

类似下面代码：

<!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>Document</title>
    <style>
        .box {
            overflow: hidden;
        }

        .box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;

        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box1">1</div>
        <div class="box2">2</div>
    </div>
</body>
</html>