浮动，定位以及伪类伪元素

一、浮动

1.什么是浮动

引入 float 属性是为了能让 web 开发人员实现简单的布局，使信息列得以横向排列，还可以使在一列文本中浮动的图像，文字环绕在它的左边或右边

2.分类

左浮动float-left，右浮动float-right
代码如下：

css部分：
    <style>
        .left,
        .right {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .right {
            float: right;
        }
    </style>
body部分：
    <div class="left">左浮动</div>
    <div class="right">右浮动</div>

左浮动右浮动效果如下：

3.浮动的特性

（1）脱离标准普通的控制，移动到指定位置 ——俗称脱标

（2）浮动的盒子不再保留原先的位置

例子如下：

css部分：
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }
        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(0, 153, 255);
        }
    </style>
body部分：
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>

box1为浮动的盒子，不占据原来的位置，所以box2会在box1（浮动）的底下显示。效果如下：

（3）盒子一行显示——信息横向排列

通过给盒子设置左浮动或者右浮动使得其在一行显示

css部分：
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;      // 给盒子设置左浮动
        }

        .two {
            background-color: purple;
            height: 200px;
        }

        .four {
            background-color: skyblue;
        }
    </style>
body部分：
    <div>1</div>
    <div class="two">2</div>
    <div class="three">3</div>
    <div class="four">4</div>

效果如下：

（4）浮动元素具有行内块元素特点

如果行内元素有了浮动,则不需要转换块级/行内块元素就可以直接给高度和宽度

例如，学浮动之前，如果想给“p”行内元素设置宽度和高度，就必须要转换为块级，或者行内块元素，应用浮动之后则可以直接设置。
代码如下：

css部分：
<style>
        p {
            float: right;
            width:150px;
            height: 200px;
            background-color: purple;
        }
</style>
body部分：
    <p>p</p>

效果如下：

（5）文字环绕元素效果—给图片设置浮动

css部分：
   <style>
       * {
           margin: 0;
           padding: 0;
       }

       .box {
           width: 300px;
           height: 100px;
           margin: 0 auto;
           padding: 5px;
       }

       .pic {
           float: left;
           width: 150px;
           height: 100px;
           margin-right: 5px;
       }

       .pic img {
           width: 100%;
       }
   </style>
body部分：
       <div class="box">
       <div class="pic">
           <img src="NBA.jpg" alt="">
       </div>
       <p>篮网官宣！哈登因伤休战，终于歇一场，他因三大巨星伤停成MVP大热门，啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦</p>
   </div>

4.清除浮动（重点）

为什么要清除浮动？
看如下代码：

css部分：
    <style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }

        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }

        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
    </style>
body部分：
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

想象一下，footer会在大毛和二毛底下显示吗？

结果效果是这样的
清除浮动的本质是为了解决父元素由于子级浮动引起内部高度为0的情况

清除浮动有四种方式：额外标签法、父元素overflow、伪元素清除法、双伪元素清除法，伪元素和双伪元素清除算是额外标签法的升级优化。（下文会讲到什么是伪元素）

（1）额外标签法

通过在box里新增一个盒子，给这个新增的盒子设置clear:both即可。
注意：这个新增的盒子要求必须是块级元素不能是行内元素
代码修改如下：

css部分：
<style>
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
        .box .shan {
            clear: both;
        }
</style>
body部分：
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
        <div class="shan"></div>
    </div>
    <div class="footer"></div>

清除浮动效果：

（2）父元素overflow

直接给父元素添加overflow:hidden即可
代码如下：

css部分：
<style>
        .box {
            overflow: hidden;
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
</style>
body部分：
    <div class="box">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>        
    </div>
    <div class="footer"></div>

效果如下：

（3）伪元素清除

代码如下：

css部分：
<style>
        .clearfix::after {       // 新建一个元素放到父盒子内容后面
            content: "";         // 伪元素必须写的属性
            display: block;      // 额外标签法要求是块级元素，所以把after行内转换为块级盒子
            height: 0;           // 不显示插入的新盒子
            clear: both;         // 清除浮动
            visibility: hidden;  // 不显示插入的新盒子
        }
        .clearfix {
            /* IE6,7专有 */
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
</style>
body部分：
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

同样实现了清除浮动的效果

（4）双伪元素清除（闭合浮动）

css部分：
<style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;  // 若写成block就成了before和after上下显示
                             // 所以是table转换为块级元素并且一行显示
        }
        .clearfix::after {
            clear: both;
        }
        .clearfix {
            *zoom: 1;
        }
        .box {
            width: 800px;
            border: 1px solid blue;
            margin: 0 auto;
        }
        .damao {
            float: left;
            width: 300px;
            height: 200px;
            background-color: purple;
        }
        .ermao {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .footer {
            height: 200px;
            background-color: black;
        }
</style>
body部分：
    <div class="box clearfix">
        <div class="damao">大毛</div>
        <div class="ermao">二毛</div>
    </div>
    <div class="footer"></div>

效果如下:

二、定位

运用定位可以使得盒子自由的在某个盒子里面移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子，这是浮动和标准流无法做到的

1.定位的组成

定位 = 定位模式 + 边偏移（top, bottom, left, 和 right四个属性）

2.定位模式

（1）静态定位—static

浏览器默认的定位模式

（2）相对定位—relative

相对定位：相对于自身原来位置，做偏移量移动

css部分：
<style>
        .box1 {
            position: relative;
            top: 100px;         // 距离上方100px，相当于下移100px
            left: 100px;        // 距离左100px，相当于右移100px
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box2 {
            width: 200px;
            height: 200px;
            background-color: hotpink;
        }
</style>
body部分：
    <div class="box1">
    </div>
    <div class="box2">
    </div>

效果如下：

（3）绝对定位—absolute

绝对定位是元素在移动的时候，是相对于它祖先元素来说的，
绝对定位特点：
1.如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位的定位祖先元素为参考点移动位置
3.绝对定位不再占有原先的位置（脱标）
注意：一般会使用子绝父相的定位模式
代码如下：

css部分：
<style>
        .yeye {
            position: relative;     // 父相
            width: 800px;
            height: 800px;
            background-color: lawngreen;
        }

        .father {
            width: 500px;
            height: 500px;
            background-color: skyblue;
        }

        .son {
            position: absolute;     // 子绝
            bottom: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>
body部分：
    <div class="yeye">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>

son盒子会以yeye祖先元素绝对定位
效果如下：

（4）固定定位—fixed

固定定位是元素固定于浏览器可视区的位置
特点：
1.以浏览器的可使窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动而滚动
2.固定定位不在占有原先的位置
代码如下：

css部分：
<style>
       body {
           height: 2000px;
       }

       .dj {
           position: fixed;
           top: 0;
           right: 0;
       }
</style>
body部分：
   <div class="dj">
       <img src="https://game.gtimg.cn/images/yxzj/web201706/images/comm/floatwindow/r_code.jpg" alt="">
   </div>

效果如下：

（5）粘性定位—sticky

用于一个盒子最初位于某个位置，滚动滚动条后会粘于页面最上方

css部分：
<style>
        body {
            height: 3000px;
        }

        .nav {
            position: sticky;
            top: 0;
            width: 800px;
            height: 50px;
            background-color: pink;
            margin: 100px auto;
        }
</style>
body部分：
    <div class="nav">我是导航栏</div>

效果如下：

3.拓展应用

（1）定位的堆叠顺序（z-index）

数值可以是正整数，负整数或0，默认是auto，数值越大，盒子越靠上
如果属性值相同，则按照书写顺序，后来居上
数字后面不能加单位
只有定位的盒子才有z-index属性
上代码：

css部分：
<style>
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
        }
        .xiongda {
            background-color: red;
            z-index: 1;
        }
        .xionger {
            background-color: green;
            left: 50px;
            top: 50px;
            z-index: 2;
        }
        .qiangge {
            background-color: blue;
            left: 100px;
            top: 100px;
        }
</style>
body部分：
    <div class="box xiongda">熊大</div>
    <div class="box xionger">熊二</div>
    <div class="box qiangge">光头强</div>

由于xionger的z-index比xiongda的大，所以xionger在xiongda上堆叠
效果如下：

（2）绝对定位水平居中

上代码：

<style>
        .box {
            position: absolute;
            /* 1. left 走 50% 父容器宽度的一半 */
            left: 50%;
            /* 2. margin 负值 往左边走 自己盒子宽度的一半*/
            margin-left: -100px;
            /* 3. top 走 50% 父容器高度的一半 */
            top: 50%;
            /* 4. margin 负值 往上走 自己盒子宽度的一半 */
            margin-top: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
</style>
body部分：
    <div class="box"></div>

效果如下：（红色线是我用笔画上的为了显示边界）

（3）特殊属性

行内元素添加绝对或固定定位，可以直接设置宽度和高度，无需进行格式转换
块级元素添加绝对或固定定位，如果不给宽度或者高度，默认大小是内容的大小
浮动元素，绝对定位（固定定位）元素都不会触发外边距合并的问题（外边距塌陷）

三、伪类以及伪元素

1.定义

伪类是添加到选择器的关键字，指定要选择的元素的特殊状态
伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

2.使用方法及区别

注意：按照规范，伪元素应该使用双冒号（::），而伪类使用单个冒号（:）
根本区别：它们是否创造了新的元素。伪元素创造了新元素，正如前面清除浮动所写到的，新建元素形成闭合浮动，然后清除浮动，而伪类的效果可以通过添加实际的类来实现
因为伪类是类似于添加类所以可以是多个，而伪元素在一个选择器中只能出现一次，并且只能出现在末尾

伪类和伪元素本人仅仅了解这些，希望有更多了解的小伙伴在评论区评论，有错误的地方也请指出，大家相互学习😁