浮动元素的重叠问题

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，同背景颜色一样，也当做背景处理

1. 对于行内元素图片显示在浮动元素之上，
2. 对于块级元素图片显示在浮动元素之下

3.2插入img标签

在行内元素和块级元素的插入img标签插入图片，同文本一样，也当做内容处理，都是在浮动元素之上

4.如果有非浮动的元素和浮动的元素同时存在，并且非浮动元素在前，则浮动元素不会高于非浮动元素

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

4.1对于行内元素在前

<span>行内元素</span>
<div>
     浮动元素
</div>

展示效果：

4.2对于块级元素

<div>
	块级元素
</div>
<div>
    浮动元素
</div>

展示效果：

ps：对于行内块元素的上述性质可参照行内元素的性质，除了行内块元素与行内元素本身的一些性质不同之外，对于浮动元素的重叠问题，他们展现的性质几乎是一样的