1、行內(nèi)元素與浮動(dòng)元素發(fā)生重疊，邊框、背景、內(nèi)容都會(huì)顯示在浮動(dòng)元素之上

對(duì)于行內(nèi)元素例如：

<style>div {float: left;width: 100px;height: 100px;background-color: pink;}span {background-color: red;border: 2px solid green;} </style> <div>浮動(dòng)元素 </div> <span>行內(nèi)元素</span>

展示的效果是：

對(duì)于行內(nèi)塊元素例如：

<style>div {float: left;width: 100px;height: 100px;background-color: pink;} <!-- 改為行內(nèi)塊元素 -->span {display: inline-block;background-color: red;border: 2px solid green;} </style>

得到的結(jié)果依然是如上圖一樣。

2、塊級(jí)元素與浮動(dòng)元素發(fā)生重疊，邊框、背景會(huì)顯示在浮動(dòng)元素之下，內(nèi)容會(huì)顯示在浮動(dòng)元素之上

例如：

<style>div:nth-child(1) {float: left;width: 100px;height: 100px;background-color: pink;}div:nth-child(2) {width: 200px;height: 200px;background-color: red;border: 2px solid green;} </style> <div>浮動(dòng)元素 </div> <div>塊級(jí)元素 </div>

展示的效果是：

3.關(guān)于插入的圖片

3.1插入背景圖片

在行內(nèi)元素和塊級(jí)元素的background屬性中添加url，同背景顏色一樣，也當(dāng)做背景處理

對(duì)于行內(nèi)元素圖片顯示在浮動(dòng)元素之上，

對(duì)于塊級(jí)元素圖片顯示在浮動(dòng)元素之下

3.2插入img標(biāo)簽

在行內(nèi)元素和塊級(jí)元素的插入img標(biāo)簽插入圖片，同文本一樣，也當(dāng)做內(nèi)容處理，都是在浮動(dòng)元素之上

4.如果有非浮動(dòng)的元素和浮動(dòng)的元素同時(shí)存在，并且非浮動(dòng)元素在前，則浮動(dòng)元素不會(huì)高于非浮動(dòng)元素

(以下均省略展示css樣式)

4.1對(duì)于行內(nèi)元素在前

<span>行內(nèi)元素</span> <div>浮動(dòng)元素 </div>

展示效果：

4.2對(duì)于塊級(jí)元素

<div>塊級(jí)元素 </div> <div>浮動(dòng)元素 </div>

展示效果：

ps：對(duì)于行內(nèi)塊元素的上述性質(zhì)可參照行內(nèi)元素的性質(zhì)，除了行內(nèi)塊元素與行內(nèi)元素本身的一些性質(zhì)不同之外，對(duì)于浮動(dòng)元素的重疊問題，他們展現(xiàn)的性質(zhì)幾乎是一樣的

總結(jié)

以上是生活随笔為你收集整理的浮动元素的重叠问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。