找到答案了，我來給自己回答。（HTML+CSS基礎(chǔ)課程-浮動(dòng)模型）（CSS深入理解之float浮動(dòng)）

“塊狀元素這么霸道都是獨(dú)占一行，如果現(xiàn)在我們想讓兩個(gè)塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動(dòng)就可以實(shí)現(xiàn)這一愿望。（為什么為什么為什么，為什么設(shè)置了浮動(dòng)就可以實(shí)現(xiàn)了）

任何元素在默認(rèn)情況下是不能浮動(dòng)的，但可以用 CSS 定義為浮動(dòng)，如 div、p、table、img 等元素都可以被定義為浮動(dòng)。如下代碼可以實(shí)現(xiàn)兩個(gè) div 元素一行顯示。”

解釋：因?yàn)楦?dòng)的破壞性造成緊密排列（去空格化）

破壞性造成父元素高度塌方，（回想那個(gè)小人圖），后宮們接在小人后面（浮動(dòng)的本質(zhì)：實(shí)現(xiàn)文字環(huán)繞功能）。

2.為什么它們沒有重疊，而是顯示在一行

因?yàn)樗麄僣ss中的z-index屬性是一樣的，如果你想讓某個(gè)div在上層，可以在css屬性中設(shè)置z-index的值，越大就越在上層，根據(jù)自己想要效果的進(jìn)行設(shè)置即可

因?yàn)樵谇懊孢€設(shè)置了ul的整體高度啊，整體就這么高，li就只能在一列啦