                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

一个div的下边框遮住另一个div的上边框是怎么做到的

上面元素的下边框挡住下面元素的上边框是怎么做到的？就是上面的div的边框是白色的，下面div的边框是黑色的，两个边框重叠的部分是白色的，这个代码怎么写？

慕粉3924367

2016-09-13

源自：JavaScript进阶篇 10-1

关注问题我要回答

5562

操作

收起

2 回答

Mr_sen
2017-08-02

你说的啥

0 回复有任何疑惑可以回复我~

收起回答

水里有条鱼
2016-09-13

关键是这句 float: left;，运用了float属性，就会脱离文档流，就不会撑开父元素，原理是li的 border-top+height刚好等于ul的height大小，所以border-bottom就会占去下面的地方，就会覆盖掉下面一个div的上边框。如果不脱离文档流，li会撑开ul，在不设置ul高度情况下， li的border-top+height+border-bottom = ul的height，所以脱离了文档流父元素要设置高度宽度不然就是0×0了，可以这样理解，脱离文档流后，父元素支持子元素溢出。