1、行內元素與浮動元素發生重疊，邊框、背景、內容都會顯示在浮動元素之上

對于行內元素例如：

<style>div {float: left;width: 100px;height: 100px;background-color: pink;}span {background-color: red;border: 2px solid green;} </style> <div>浮動元素 </div> <span>行內元素</span>

展示的效果是：

對于行內塊元素例如：

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

得到的結果依然是如上圖一樣。

2、塊級元素與浮動元素發生重疊，邊框、背景會顯示在浮動元素之下，內容會顯示在浮動元素之上

例如：

<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>浮動元素 </div> <div>塊級元素 </div>

展示的效果是：

3.關于插入的圖片

3.1插入背景圖片

在行內元素和塊級元素的background屬性中添加url，同背景顏色一樣，也當做背景處理

對于行內元素圖片顯示在浮動元素之上，

對于塊級元素圖片顯示在浮動元素之下

3.2插入img標簽

在行內元素和塊級元素的插入img標簽插入圖片，同文本一樣，也當做內容處理，都是在浮動元素之上

4.如果有非浮動的元素和浮動的元素同時存在，并且非浮動元素在前，則浮動元素不會高于非浮動元素

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

4.1對于行內元素在前

<span>行內元素</span> <div>浮動元素 </div>

展示效果：

4.2對于塊級元素

<div>塊級元素 </div> <div>浮動元素 </div>

展示效果：

ps：對于行內塊元素的上述性質可參照行內元素的性質，除了行內塊元素與行內元素本身的一些性質不同之外，對于浮動元素的重疊問題，他們展現的性質幾乎是一樣的

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。