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:对于行内块元素的上述性质可参照行内元素的性质,除了行内块元素与行内元素本身的一些性质不同之外,对于浮动元素的重叠问题,他们展现的性质几乎是一样的