web前端—前端三剑客之css(4)：浮动样式及定位和鼠标悬停_css怎么让图片浮动在父块最下面-CSDN博客

本文链接：https://blog.csdn.net/JBY2020/article/details/116272966

浮动样式

参见：https://blog.csdn.net/JBY2020/article/details/109710962

普通流在显示规则：浏览器在默认情况下规定一个块元素在父元素内的排列规则是从上往下排列、从左开始排列、一个块元素占一行。

根据普通流规则可得浮动元素的规则：

设置了浮动样式的元素不再遵守普通流规则，需要自行给浮动起来的元素设置排列规则
设置了浮动样式的元素不再遵守普通流规则，因此两个浮动的元素可以在同一行显示
当父元素的宽度不足以放下所有的浮动元素时，那么超出父元素边界的元素会自动换行显示

浮动样式重点

浮动元素之间不会覆盖彼此
具有和文本环绕相同的特性，一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列
设置了浮动的行内元素的顶部不会超出所在行的行框顶部
由于图片元素脱离平面，此处没有内容，所以高度塌陷，使得两边的文字靠拢
一个浮动元素后面的行内元素会首先按照文本环绕效果进行排列，这也是文本环绕效果概念模型

浮动样式父元素高度塌陷

产生的原因：当父元素没有固定高度时，父元素高度由子元素高度之和撑开。

解决的方法：

当父元素形成BFC(块级格式化范围)时, 父元素就具有了包裹性，可简单理解为，父元素有了一个虚拟的框(此时子元素的外边距不再会和父元素的外边距合并), 父元素的宽高由里面还在平面上的元素和漂浮的元素一同撑开

方法一：让父元素BFC化

给父元素设置属性overflow:hidden;即可

方法二：利用一个幽灵元素来清除浮动，手动撑开父元素的高度

新建一个空的块元素，并给他设置clear：both属性（缺陷：破坏页面的文档结构）

使用伪元素生成一个幽灵元素，并给他设置clear：both属性

因为是非固定高度，所以所有的元素都浮起来了

clear:清除浮动(元素盒子的边不能和前面的盒子相邻)
left; 左侧抵抗浮动
right; 右侧抵抗浮动
both; 两边都抵抗浮动(上面两个合并)

定位

参见：https://blog.csdn.net/JBY2020/article/details/109710962

绝对定位：会清除当前所占的位置，覆盖前面的内容，默认不会进行位置的移动，需要自己去设置达到移动位置的目的

相对定位：不会清除当前所占的位置

设置了定位属性的元素可以设置元素的以下位置属性：

left、right、top、bottom、z-index

z-index属性可以改变元素的层级：

当属性值为负数的时候，元素层级靠最下层，可以在背景颜色层之下；

只设置了绝对定位的元素或是设置了z-index为0 的元素遵守后飘起来的元素飘的最高；

当为正数的时候，层级越靠上。

元素设置居中，鼠标悬停，见下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位及伪类鼠标悬停</title>
    <style>
        *{
            margin: 0%;
        }
        .s1{
            position: relative;   /*  相对定位  */
            width: 300px;
            height: 200px;
            background-color: blueviolet;
            right: 30px;
            top: 30px;

        }
        .s2{
            width: 250px;
            height: 150px;
            background-color: brown;
            position: absolute;     /*  绝对定位  */
            bottom: 50px;
            left: 20px;
        }
        .s3{
            width: 400px;
            height: 300px;
            background-color: coral;
            position: fixed;    /*  固定定位  */
            right: 20%;
        }
        .s4{
            width: 100px;
            height: 100px;
            background-color: cyan;
            position: fixed;
            z-index: -1;    
        }
        .s4:hover{
            /* 鼠标悬停 */
            width: 200px;
            height: 300px;
            background-color: chartreuse;
            transition: 1s;   /*   设置过度时间   */
        }
        .s5{
            /* 元素垂直居中，只有在当前元素设置了绝对定位才生效 */
            width: 20px;
            height: 20px;
            background-color: blue;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4">
        <div class="s5"></div>
    </div>
</body>
</html>