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><br><html lang="en"><br><head><br> <meta charset="UTF-8"><br> <meta http-equiv="X-UA-Compatible" content="IE=edge"><br> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br> <title>Document</title><br> <style><br> .box {<br> overflow: hidden;<br> }<br><br> .box1 {<br> width: 100px;<br> height: 100px;<br> background-color: red;<br> float: left;<br><br> }<br> .box2 {<br> width: 100px;<br> height: 100px;<br> background-color: yellow;<br> }<br><br> </style><br></head><br><body><br> <div class="box"><br> <div class="box1">1</div><br> <div class="box2">2</div><br> </div><br></body><br></html><br>

2021-03-16 18:04:11