第一章：结构伪类选择器

1.1 作用和优势

作用：根据元素在 HTML 中的结构关系查找元素。
优势：减少对 HTML 中类的依赖，有利于保持代码整洁。

1.2 结构伪类选择器

场景：常常用于查找某父级选择器中的子元素。
选择器： | 选择器 | 说明 | | —- | —- | | E:first-child {} | 匹配父元素中第一个子元素，并且是 E 元素 | | E:last-child {} | 匹配父元素中最后一个子元素，并且是 E 元素 | | E:nth-chil1d(n){} | 匹配父元素中第 n 个子元素，并且是 E 元素 | | E:nth-last-child(n){} | 匹配父元素中倒数第 n 个子元素，并且是 E 元素 |
n 的注意点：
- n为：0、1、2、3、4、5、6、……
- 通过 n 可以组成常见公式： | 功能 | 公式 | | —- | —- | | 偶数 | 2n、even | | 奇数 | 2n+1、2n-1、odd | | 找到前 5 个 | -n+5 | | 找到从第 5个往后 | n+5 |
示例：

<!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>Document</title>
    <style>
        /* 选中第一个元素 */
        li:first-child {
            background-color: red;
        }
        /* 选中最后一个元素 */
        li:last-child {
            background-color: pink;
        }
        /* 选中第三个元素 */
        li:nth-child(3) {
            background-color: green;
        }
        /* 选中倒数第2个元素 */
        li:nth-last-child(2) {
            background-color: yellow;
        }
    </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>
</html>

示例：

<!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>Document</title>
    <style>
        li:nth-child(2n) {
            background-color: yellow;
        }
    </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>

</html>

1.3 nth-of-type 结构伪类选择器

选择器： | 选择器 | 说明 | | —- | —- | | E:nth-of-type(n){} | 只在父元素的同类型（E）子元素范围中，匹配第 n 个 |
区别：
- :nth-child 直接在所有孩子中数个数。
- :nth-of-type 先通过该 类型 找到复合的一堆子元素，然后在这一堆子元素中数个数。

第二章：伪元素

伪元素：一般页面中的非主体内容可以使用伪元素。
区别：
- 元素：HTML 设置的标签。
- 伪元素：由 CSS 模拟出的标签效果。
种类： | 伪元素 | 作用 | | —- | —- | | ::before | 在父元素内容的最前面添加一个伪元素 | | ::after | 在父元素内容的最后添加一个伪元素 |

注意：

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

示例：

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }

        /* 伪元素默认是行内元素 */
        div::before {
            /* content 必须添加，否则伪元素不生效 */
            content: '老鼠';
            background-color: pink;
        }

        div::after {
            content: '大米';
            background-color: pink;
        }
    </style>
</head>

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

</html>

第三章：标准流

标准流：又称 文档流 ，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素。
常见的标准流排版规则：
- 块级元素：从上到下，垂直布局，独占一行。
- 行内元素或行内块元素：从左到右，水平布局，空间不够自动折行。

第四章：浮动

4.1 浮动的作用

早期的作用：图文环绕。

现在的作用：网页布局（让垂直布局的盒子变为水平布局，如：一个向左，一个向右）。

4.2 浮动的语法

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动元素的边缘。
语法：

选择器 { float：属性值; }

属性值	描述
none	元素不浮动（默认值）
left	元素向左浮动
right	元素向右浮动

示例：

<!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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
        }

        .box1 {
            float: left;
            background-color: pink;
        }

        .box2 {
            float: left;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

</html>

4.3 浮动的特点

① 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置。
② 浮动元素比标准流高半个级别，可以覆盖标准流中的元素。
③ 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动。
④ 浮动元素有特殊的显示效果（一行可以显示多个，可以设置宽高），即浮动后的元素具有行内块元素的特点，但是中间是没有缝隙的。

注意：浮动的元素不能通过 text-align:center; 或 margin:0 auto; 设置。

示例：

<!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>Document</title>
    <style>
        /* 默认情况下，浮动的标签是顶对齐的。 */
        /* 浮动在一行排列，宽度生效，即浮动后的标签具有行内块元素的特点。 */
        .box1 {
            float: left;

            width: 100px;
            height: 100px;
            background-color: pink;
        }

        .box2 {
            float: left;

            width: 200px;
            height: 200px;
            background-color: skyblue;

            /* 因为有浮动，不能生效，所以盒子无法水平居中 */    
            margin: 0 auto;
        }

        .box3 {
            width: 300px;
            height: 300px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
</body>

</html>

4.4 浮动的案例

示例：

<!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>Document</title>
    <style>
        .box .top {
            height: 40px;
            background-color: #333;
        }

        .box .header {
            width: 1226px;
            height: 100px;
            background-color: #ffc0cb;
            margin: 0 auto;
        }

        .box .content {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
        }

        .box .content .left {
            float: left;
            width: 234px;
            height: 460px;
            background-color: #ffa500;
        }

        .box .content .right {
            float: right;
            width: 992px;
            height: 460px;
            background-color: #87ceeb;
        }

        /* 
            CSS 书写顺序：
            ① 浮动 或 display
            ② 盒子模型相关属性：margin、border、padding 、宽度、高度、背景色
            ③ 文字样式
         */
    </style>
</head>

<body>
    <div class="box">
        <!-- 通栏的盒子：宽度和浏览器宽度一样大 -->
        <div class="top"></div>
        <div class="header">头部</div>
        <div class="content">
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </div>
</body>

</html>

示例：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            margin: 50px auto;
            width: 1226px;
            height: 614px;
        }

        .left {
            float: left;
            margin-right: 14px;
            width: 234px;
            height: 614px;
            background-color: #800080;
        }

        .right {
            float: left;
            width: 978px;
            height: 614px;
        }

        .right li {
            float: left;
            margin-right: 14px;
            margin-bottom: 14px;
            width: 234px;
            height: 300px;
            background-color: #87ceeb
        }

        .right li:nth-child(4n) {
            margin-right: 0;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</body>

</html>

示例：

<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
        }

        ul {
            list-style: none;
        }

        .nav {
            margin: 50px auto;
            width: 640px;
            height: 50px;
            background-color: #ffc0cb;
        }

        .nav li {
            float: left;
        }

        .nav a {
            display: block;
            width: 80px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-weight: bold;
            font-size: 16px;
            color: #fff;
        }

        .nav a:hover {
            background-color: #008000;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li><a href="#">新闻1</a></li>
            <li><a href="#">新闻2</a></li>
            <li><a href="#">新闻3</a></li>
            <li><a href="#">新闻4</a></li>
            <li><a href="#">新闻5</a></li>
            <li><a href="#">新闻6</a></li>
            <li><a href="#">新闻7</a></li>
            <li><a href="#">新闻8</a></li>
        </ul>
    </div>
</body>

</html>

第五章：清除浮动

5.1 清除浮动的介绍

含义：清除浮动带来的影响，换言之，如果子元素浮动了，此时子元素不能撑开标准流的块级父元素。
原因：子元素浮动后脱标，不占用标准流的位置。
目的：需要父元素有高度，从而不影响其他网页元素的布局。
示例：

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <!-- 父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，会显示到上面的位置。 -->
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

5.2 清除浮动的方法 — 直接设置父元素高度

优点：简单粗暴、方便。
缺点：有些布局中不能有固定元素高度，如：新闻列表、京东推荐模块。

5.3 清除浮动的方法 — 额外标签法

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

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 清除浮动 */
        .clearfix {
            clear: both;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="top">
        <div class="left"></div>
        <div class="right"></div>
        <!-- 额外标签法 -->
        <div class="clearfix"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

5.4 清除浮动的方法 — 单伪元素清除法

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

/* 清除浮动 */
.clearfix::after {
    content: '';
    display: block;
    clear: both;
    /*  补充代码，使得在网页中看不到伪元素 */
    height: 0;
    visibility: hidden;
}

优点：项目中使用，直接给标签加类即可清除浮动。
示例：

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 单伪元素标签法 */
        .clearfix::after {
            content: '';
            display: block;
            clear: both;
            /*  补充代码，使得在网页中看不到伪元素 */
            height: 0;
            visibility: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

5.5 清除浮动的方法 — 双伪元素清除法（推荐）

操作：

.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

优点：项目中使用，直接给标签加类即可清除浮动。
示例：

<!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>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* .clearfix::before 作用：解决外边距塌陷问题 */
        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        /* 真正清除浮动的标签 */
        .clearfix::after {
            clear: both;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

5.6 清除浮动的方法 — 给父元素设置 `overflow:hideen`

操作：给父元素设置 overflow:hideen。
优点：方便。
示例：

<!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>给父元素设置 `overflow:hideen`</title>
    <style>
        .top {
            margin: 0 auto;
            width: 1000px;
            /* height: 300px; */
            background-color: pink;
        }

        .left {
            float: left;
            width: 200px;
            height: 300px;
            background-color: #ccc;
        }

        .right {
            float: right;
            width: 790px;
            height: 300px;
            background-color: skyblue;
        }

        /* 给父元素设置 `overflow:hideen` */
        .clearfix{
            overflow: hidden;
        }

        .bottom {
            height: 100px;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="top clearfix">
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <div class="bottom"></div>
</body>

</html>

Java学科

CSS 浮动

第一章：结构伪类选择器

1.1 作用和优势

1.2 结构伪类选择器

1.3 nth-of-type 结构伪类选择器

第二章：伪元素

第三章：标准流

第四章：浮动

4.1 浮动的作用

4.2 浮动的语法

4.3 浮动的特点

4.4 浮动的案例

第五章：清除浮动

5.1 清除浮动的介绍

5.2 清除浮动的方法 — 直接设置父元素高度

5.3 清除浮动的方法 — 额外标签法

5.4 清除浮动的方法 — 单伪元素清除法

5.5 清除浮动的方法 — 双伪元素清除法（推荐）

5.6 清除浮动的方法 — 给父元素设置 `overflow:hideen`

CSS 浮动

第一章：结构伪类选择器

1.1 作用和优势

1.2 结构伪类选择器

1.3 nth-of-type 结构伪类选择器

第二章：伪元素

第三章：标准流

第四章：浮动

4.1 浮动的作用

4.2 浮动的语法

4.3 浮动的特点

4.4 浮动的案例

第五章：清除浮动

5.1 清除浮动的介绍

5.2 清除浮动的方法 — 直接设置父元素高度

5.3 清除浮动的方法 — 额外标签法

5.4 清除浮动的方法 — 单伪元素清除法

5.5 清除浮动的方法 — 双伪元素清除法（推荐）

5.6 清除浮动的方法 — 给父元素设置 overflow:hideen

5.6 清除浮动的方法 — 给父元素设置 `overflow:hideen`