十二、CSS浮动CSS浮动学习： 1. 结构伪类选择器； 2、伪元素； 3、标准流； 4、浮动； 5、清除浮动。。。

1. 结构伪类选择器

作用：根据元素在HTML中的结构关系查找元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器的子元素
选择器

选择器	说明
E:first-child{}	匹配父元素中的第一个子元素，并且是E元素
E:last-child{}	匹配父元素中的最后一个子元素，并且是E元素
E:nth-child{}	匹配父元素中的第n个子元素，并且是E元素
E:nth-last-child{}	匹配父元素中的倒数第n个子元素，并且是E元素

n为0、1、2……，可组成常见公式选中多个

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选中所有偶数 */
        li:nth-child(2n){
            background-color: rebeccapurple;
        }
    </style>
</head>

<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
    </ul>
</body>

2. 伪元素

伪元素：一般页面中的非主体内容可以使用伪元素
元素：HTML设置的标签伪元素：由CSS模拟出的标签
种类

伪元素	作用
::before	在父元素内容的最前面添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点

必须设置content属性才能生效
伪元素默认是行内元素

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father{
            color: red;
        }
        .father::before{
            /* 内容,content中可以没有内容,但是content一定要有 */
            content: '老鼠';
            color: greenyellow;
        }
        .father::after{
            content: '大米';
            color: aqua;
        }
    </style>
</head>

<body>
    <!-- 伪元素  通过css创建标签，装饰不重要的小图 -->
    <!-- 找父级,在父级里面创建子级标签 -->
    <div class="father">爱</div>
</body>

3. 标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则
常见的标准流排版规则

块级元素：从上往下，垂直布局，独占一行
行内元素或行内块元素：从左往右，水平布局，空间不够自动折行

4. 浮动

1. 作用：图文环绕——网页布局

2. 示例

图文环绕

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            /* 图片左浮动 */
            float: left;
        }
    </style>
</head>

<body>
    <img src="./image/2013062320262198_S.jpg">
    摸鱼儿（淳熙己亥，自湖北漕移湖南，同官王正之置酒小山亭，为赋）
    更能消、几番风雨。匆匆春又归去。惜春长恨花开早，何况落红无数。春且住。见说道、天涯芳草迷归路。怨春不语。算只有殷勤，画檐蛛网，尽日惹飞絮。
    长门事，准拟佳期又误。蛾眉曾有人妒。千金纵买相如赋，脉脉此情谁诉。君莫舞。君不见、玉环飞燕皆尘土。闲愁最苦。休去倚危楼，斜阳正在，烟柳断肠处。
</body>

网页布局

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
        }
        .one{
            background-color: blue;
            float: left;
        }
        .two{
            background-color: pink;
            float: left;
        }
    </style>
</head>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

3. 浮动的特点

浮动的元素会脱离标准流（脱标），在标准流中不占位置
浮动元素比标准流高半个级别，可以覆盖标准流中的元素，但无法覆盖标准流的文字
浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
浮动元素有特殊的显示效果
- 一行可以显示多个
- 可以设置宽高
浮动元素不能通过text-align:center或margin:0 auto设置居中

5. 清除浮动

1. 直接设置父元素高度

优点：简单方便
缺点：有些布局中不能固定父元素高度（如：新闻列表）

2. 额外标签法

操作
- 在父元素内容的最后添加一个块级元素
- 给添加的块级元素设置clear:both
缺点：会给页面中添加额外的标签，会让页面的HTML结构变复杂

3. 单伪元素清除法

操作：用伪元素替代额外标签

.clearfix::after{
    content: '';
    display: block;
    clear: both;

    /* 为了兼容性，可加补充代码，在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

优点：直接给标签加类就可以清除浮动

4. 双伪元素清除法

操作

/* 并集选择器 */
/* .clearfix::before作用：解决外边距塌陷问题 */
/* 塌陷：父子标签都是块级，子级加margin会影响父级位置 */
.clearfix::before,
.clearfix::after{
    content: '';
    /* 转换显示模式为表格 */
    display: table;
}
/* 真正清除浮动的标签 */
.clearfix::after{
    clear: both;
}

优点：直接给标签加类就可以清除浮动

5. 给父元素设置overflow:hidden

优点：方便

6. 拓展

1. CSS书写顺序（浏览器执行效率更高）

浮动/display
盒子模型：margin、border、padding、宽高背景色
文字样式

2. 去掉列表的符号

list-style：none；