                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /商城分类导航效果

看了别人的问题，还是不明白加了overflow:hidden的效果

.left dl dd{

display:block;

overflow:hidden;}

不加的话，第二行的dd内容会排列到dt底下

dt | dd dd dd dd

dd dd dd dd 但是加了hidden就会变成这样

dt | dd dd dd dd

dd dd dd dd

所谓的清楚浮动就是把父元素的float清除掉，所以第二行的dd才会排列的那里吗？

但是dt也没有固定的高度。。为啥会这样

pocketsun

2016-04-16

源自：商城分类导航效果 2-5

关注问题我要回答

910

操作

收起

2 回答

传说中的小白龙
2016-09-27

来的比较晚。希望对慕友有帮助。

我暂且将你的一群dd放到div里吧。

其实这里的overflow：hidden作用的确是清除浮动。说的再清楚一点就是：div计算高度时，将计算浮动元素的高——一群dd的高。
计算完毕后div作为一个块级元素已经有高有宽了，宽是直接等于父元素的内容宽度，高则是内容在里面排列超过宽度换行。
dt是浮动元素，div里的a也是浮动的，div就被传送到了dt身边。最重要的一点，div在构建完毕后宽度是一定的，这导致了它的形状就只能是向下伸展的矩形。这就导致了，你的第二行dd排列到了那里，总不可能块状盒子是多边形吧。

应该就是酱，自己的理解，有误还望指正。