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

首页课程实战体系课手记专栏慕课教程

来源：4-9 小慕医生项目开发（6）

siegelions

2020-12-02 12:40:26

# 具体遇到的问题

# 报错信息的截图

# 相关课程内容截图

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

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

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

写回答

2回答

好帮手慕久久

2021-03-16

同学你好，解答如下：

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

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

祝学习愉快！

heixin_慕斯卡6086637

hp>老师， 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>

h021-03-16

共1条回复

0 学习 · 15276 问题

查看课程

相似问题

何时该清除浮动

回答 2

2-4 清除浮动方法四问题

回答 1

既然BFC能清除浮动，那么清除浮动的方法中怎么只有一条能形成BFC?

回答 1

4-9小慕医生开发（6）中视频13：45的医院公告li为什么清除浮动，以及我dt/dd位置不知如何实现

回答 2

老师，这里用隔墙的方式清除浮动，margin没有失效

回答 1

打开慕课网App查看更多内容