CSS基础（盒子模型案例,边框和阴影,浮动）

最新推荐文章于 2024-07-17 18:39:50 发布

魔术师ID

最新推荐文章于 2024-07-17 18:39:50 发布

阅读量2k

点赞数 7

分类专栏： html5+css3 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45585640/article/details/122040990

版权

html5+css3 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

CSS基础（四）

1. 盒子模型案例

1.1 快报案例演练目标

局部盒子布局分析能力（从上到下）
复习盒子模型相关属性
实战技巧

分隔线的实现技巧
取消无序列表的小圆点
VSCode 的列选择快捷键

1.2 案例素材

品优购快报
【特惠】爆款耳机5折秒！
【特惠】母亲节，健康好礼低至5折！
【特惠】爆款耳机5折秒！
【特惠】9.9元洗100张照片！
【特惠】长虹智能空调立省1000

1.3 案例实现

HTML 结构搭建

   <div class="box">
     <h3>品优购快报</h3>
     <ul>
       <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
       <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
       <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
       <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
       <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
     </ul>
   </div>

公共样式编写

    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

最外侧盒子

.box {
  width: 246px;
  height: 161px;
  border: 1px solid #ccc;
  margin: 50px auto;
}

新闻标题

    .box h3 {
      height: 31px;
      padding-left: 14px;
      line-height: 32px;
      font-size: 14px;
      font-weight: 400;
      border-bottom: 1px dotted #ccc;
    }

新闻列表

.box ul {
  margin: 7px 20px 0;
}

.box ul li {
  height: 23px;
  line-height: 23px;
}

.box ul a {
  font-size: 12px;
  color: #666;
}

.box ul a:hover {
  text-decoration: underline;
}

1.4 案例小结

1. 开发步骤

分析页面结构（如果内容太多，可以后续补充）
编写公共样式
从上向下从第一个大盒子开始
最外侧盒子需要有注释，辅助 CSS 分段和阅读
从上向下，从左向右依次编写小盒子样式，直到一个大盒子完成
如果小盒子比较复杂可以：
开始前增加背景颜色辅助调试
结束后删除背景颜色

2. 分隔线的实现技巧

使用 padding 可以让分割线比文本长

3. 取消无序列表的小圆点：`list-style: none;`

4. 列选择快捷键 `ctrl + alt + shift + ↑ / ↓`

5. 布局时务必要注意 `padding` 和 `border` 会对影响盒子大小

2. 边框和阴影

2.1 圆角边框原理

圆角边框的效果是什么？在网页布局中使用的多吗？

在边框的四周有一个圆形转角，让盒子视觉效果更好
在网页布局中使用的多

圆角边框的属性是什么？

border-radius

2.2 圆角边框的使用

怎么做圆形？

border-radius: 50%;
正方形盒子是圆形 / 长方形盒子是椭圆

怎么做圆角矩形？

border-radius: 高度的一半;
长方形盒子（宽 > 高）

怎么设置不同的圆角？

border-radius: 10px 20px 30px 40px; 左上 → 右上 → 右下 → 左下（顺时针）

        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 30px;
        border-bottom-left-radius: 40px;

2.3 盒子阴影

盒子阴影属性都有哪些？

值	描述
h-shadow	必须，x 偏移量，允许负值
v-shadow	必须，y 偏移量，允许负值
blur	可选，阴影模糊半径
spread	可选，阴影扩散半径
color	可选，阴影颜色
inset	可选，内部阴影，直接写单词即可

示例代码：

    /* x偏移量 | y偏移量 | 阴影颜色 */
    box-shadow: 60px -16px teal;

    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
    box-shadow: 10px 5px 5px black;

    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

    /* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
    box-shadow: inset 5em 1em gold;

盒子阴影会影响盒子大小吗？

不会

`div` 能使用 `:hover` 吗？为什么？

可以
伪类是状态 / div 同样存在鼠标经过状态

2.4 文字阴影

文字阴影属性都有哪些（别硬记）？

值	描述
h-shadow	必须，x 偏移量，允许负值
v-shadow	必须，y 偏移量，允许负值
blur	可选，阴影模糊半径
color	可选，阴影颜色

示例代码：

/* x偏移量 | y偏移量 | 阴影颜色 */
text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);

3. 浮动基础

3.1 浮动导读

网页布局的本质——用 CSS 来摆放盒子。把盒子摆放到相应位置.CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

普通流（标准流）
浮动
定位

3.2 传统网页布局三种方式

传统网页布局有哪三种方式？

标准流（文档流）
浮动
定位

标准流（文档流）是如何布局的？

标签按照规定好的默认方式排列（块级元素、行内元素）；
标准流是最基本的布局方式。
所谓的标准流: 就是标签按照规定好默认方式排列.

块级元素会独占一行，从上向下顺序排列。

常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table

行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。

常用元素：span、a、i、em 等

以上都是标准流布局，我们前面学习的就是标准流，标准流是最基本的布局方式。

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了。

注意：实际开发中，一个页面基本都包含了这三种布局方式

3.3 为什么需要浮动

浮动能解决什么问题？

让多个块级元素（不改变显示方式）水平排成一行
让两个块级元素一个左对齐，一个右对齐

网页布局的准则是什么？

多个块级元素纵向排列 —— 标准流
多个块级元素横向排列 —— 浮动

3.4 什么是浮动

浮动的概念是什么？

float 属性用于创建浮动框，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
选择器 { float: 属性值; }

浮动的方向有几个？语法怎么写？

左浮动：float: left;
右浮动：float: 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>7. 浮动</title>
    <style>
        .box {
            width: 800px;
            height: 400px;
            background-color: #ddd;
        }
        .box-1 {
            width: 100px;
            height: 100px;
            background-color: seagreen;
            float: left;
        }
        .box-2 {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 26, 255);
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
</body>
</html>

3.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>8. 浮动特性-脱标</title>
    <style>
        .box1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 43);
        }

        .box2 {
            width: 300px;
            height: 300px;
            background-color: rgb(217, 255, 0);
        }
    </style>
</head>

<body>
    <div class="box1">浮动的盒子</div>
    <div class="box2">标准流的盒子</div>
</body>

</html>

3.6 浮动特性-浮动元素一行显示

几个浮动元素之间会有缝隙吗？会按照什么方式对齐？

不会有缝隙（与 inline-block 不同）
会按照顶部对齐

如果父级盒子宽度装不下浮动的盒子，会发生什么情况？

上一排空间不够的盒子会被挤下来

<!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>9. 浮动特性-浮动元素一行显示</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            background-color: #ddd;
        }

        .box-1 {
            width: 400px;
            height: 400px;
            background-color: seagreen;
            float: left;
        }

        .box-2 {
            width: 400px;
            height: 400px;
            background-color: rgb(0, 26, 255);
            float: right;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
</body>

</html>

3.7 浮动特性-浮动元素具有行内块特性

行内元素能使用浮动吗？浮动之后能指定宽高吗？

行内元素同样可以使用浮动
行内元素浮动之后可以指定宽高

行内元素有了浮动属性后，还需要使用 `display: inline-block` 吗？

行内元素浮动之后可以指定宽高，不再需要转换显示模式

如果没有给块级盒子设置宽度，默认宽度是什么？浮动之后的宽度是什么？

默认宽度是父级盒子的宽度
浮动之后宽度由内容来决定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>10. 浮动的元素具有行内块元素特点</title>
    <style>
        span,
        div {
            float: left;
            margin-right: 10px;
            width: 200px;
            height: 100px;
            background-color: rgb(43, 255, 0);
        }

        p {
            float: right;
            height: 100px;
            background-color: rgb(247, 199, 247);
        }
    </style>
</head>

<body>
    <span>10. 浮动的元素具有行内块元素特点</span>
    <span>10. 浮动的元素具有行内块元素特点</span>
    <div>10. 浮动的元素具有行内块元素特点</div>
    <p>10. 浮动的元素具有行内块元素特点</p>
</body>

</html>

3.8 浮动元素经常搭配标准流的父元素

在网页布局时，标准流的父盒子负责什么？

标准流的父盒子排列上下位置

在网页布局时，浮动的子盒子负责什么？

浮动的子盒子负责在父盒子中横向排列

<!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>11. 浮动元素搭配标准流父盒子</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: #ddd;
        }
        .box-1 {
            width: 100px;
            height: 100px;
            background-color: seagreen;
            float: left;
        }
        .box-2 {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 26, 255);
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
</body>
</html>

3.9 浮动小结「扩展」

应用场景:与标准流的父盒子搭配使用

标准流父盒子负责上下
浮动子盒子负责左右
内容套在子盒子内部，子盒子最好不要既负责布局，又要负责内容

浮动的元素会脱标 —— 下方的盒子会占据原有的位置

父盒子中的所有亲儿子盒子一起浮动

浮动相比较 inline-block 的优势
1. 没有缝隙
2. 顶端对齐（inline-block 会按照文字对齐方式对齐）
初学浮动布局的痛点
1. 务必要控制好每个盒子的宽度，宽度不够会掉下去
2. 用调试工具检查盒子位置最靠谱，千万不要盯着代码看
3. * {margin: 0; padding: 0} 不要忘

注意：负责布局的盒子就只负责布局，不要监管内容。

盒子多能保证呆在靠谱的位置比什么都强；
盒子少既要负责布局，又要负责内容，稍微复杂就乱套。

4. 浮动案例

4.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>11. 浮动元素搭配标准流父盒子</title>
    <style>
        /* 标准流父盒子 */
        .box {
            width: 200px;
            height: 100px;
          /*background-color: #ddd;*/
        }
        /* 浮动元素 */
        .box .left {
            width: 100px;
            height: 100px;
            background-color: seagreen;
            float: left;
        }
        /* 浮动元素 */
        .box .right {
            width: 100px;
            height: 100px;
            background-color: rgb(0, 26, 255);
            float: right;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

4.2 浮动布局

大盒子 + 4 个浮动子盒子
多个子盒子宽度相同，间距相同，且能够完整在大盒子中排放的技巧
不用后代选择器的隐患

4.3 浮动练习-手机模块

子代选择器的经典应用场景
先定大小，后定位置
盒子套盒子 —— 前端布局基本功

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动布局练习3</title>
    <style>
        .box {
            width: 1226px;
            height: 615px;
            background-color: pink;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 234px;
            height: 615px;
            background-color: rgb(255, 0, 0);
        }

        .right {
            float: left;
            width: 992px;
            height: 615px;
            background-color: rgb(170, 170, 170);
        }

        .right>div {
            float: left;
            width: 234px;
            height: 300px;
            background-color: pink;
            margin-left: 14px;
            margin-bottom: 14px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
        </div>
    </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>常见的网页布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        li {
            list-style: none;
        }
        #app {
            width: 800px;
            height: 1110px;
            border: 2px solid red;
            margin: 100px auto;
        }
        /* 头部  */
        .header {
            width: 780px;
            height: 240px;
            border: 2px solid rgb(255, 0, 0);
            margin: 10px auto;
        }
        .header .header-top {
            width: 760px;
            height: 150px;
            border: 2px dashed rgb(76, 0, 255);
            margin: 10px auto;
        }
        .header .header-nav {
            width: 760px;
            height: 50px;
            border: 2px dashed rgb(76, 0, 255);
            margin: 10px auto;
        }
        /* 头部  */

        /* 中间 */
        .center {
            width: 780px;
            height: 620px;
            border: 2px solid rgb(44, 0, 146);
            margin: 10px auto;
        }
        .center .left {
            float: left;
            width: 260px;
            height: 600px;
            border: 2px dashed rgb(51, 255, 0);
            margin: 10px;
        }
        .center .right {
            float: left;
            width: 472px;
            height: 600px;
            border: 2px dashed rgb(51, 255, 0);
            margin: 10px;
        }
        /* 大盒子宽度 = n * 盒子宽度 + (n - 1) * 盒子间距 */
        .center .right ul li {
            width: 133px;
            height: 147px;
            float: left;
            border: 2px dashed rgb(221, 186, 224);
            margin: 10px 10px;
        }
        .center .right .right-bottom {
            width: 448px;
            height: 63px;
        }
        /* 中间 */

        /* 底部 */
        .footer {
            width: 780px;
            height: 200px;
            border: 2px solid rgb(255, 0, 0);
            margin: 10px auto;
        }
        /* 底部 */
    </style>
</head>
<body>
    <div id="app">
        <!-- 头部 -->
        <div class="header">
            <div class="header-top">header-top</div>
            <div class="header-nav">header-nav</div>
        </div>
        <!-- 头部 -->

        <!-- 中间  -->
        <div class="center">
            <div class="left">left</div>
            <div class="right">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li class="right-bottom">right</li>
                </ul>
            </div>
        </div>
        <!-- 中间 -->
        <!-- 底部  -->
        <div class="footer">
            footer
        </div>
        <!-- 底部  -->
    </div>
</body>
</html>

效果图：

4.5 浮动的两个注意点

子浮父不浮
兄弟一起浮

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>浮动注意点</title>
    <style>
        .parent {
            width: 600px;
            height: 400px;
            background-color: rgb(128, 128, 128);
            margin: 0 auto;
        }

        .child-1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(236, 163, 236);
        }

        .child-2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(0, 255, 42);
        }

        .child-3 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child-1"></div>
        <div class="child-2"></div>
        <div class="child-3"></div>
    </div>
</body>

5. 清除浮动

5.1 为什么清除浮动

所有父盒子都能准确指定高度吗？

不能

有哪些场景不方便指定盒子高度？

京东商城的产品特别多
新闻内容

如果子盒子全部浮动，父盒子的高度能被撑开吗？为什么？

不能
盒子浮动后，会脱标，一旦脱标，原有位置不再保留

为什么要清除浮动（面试题）

如果在开发时，不方便给父盒子指定高度，子盒浮动后（脱标），不占有原有位置，导致父盒子高度为 0，最终影响到下方的盒子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>17. 为什么需要清除浮动</title>
    <style>
        .parent {
            width: 800px;
            border: 2px solid rgb(0, 0, 0);
            margin: 0 auto;
        }

        .child-1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(236, 163, 236);
        }

        .child-2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: rgb(0, 255, 42);
        }

        .footer {
            width: 200px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child-1"></div>
        <div class="child-2"></div>
    </div>
        <div class="footer"></div>
</body>

</html>

5.2 清除浮动本质以及额外标签法

清除浮动的本质是什么？

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

清除浮动的语法是什么？

语法：选择器{clear:属性值;}

可能的值：

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

我们实际工作中，几乎只用 clear: both;
清除浮动的策略是: 闭合浮动.

额外标签法如何使用？

在浮动元素末尾添加一个空的 div
设置该 div 的样式为 clear: both;

额外标签法有什么优缺点？

优点：通俗易懂 / 书写方便 / W3C 推荐
缺点：添加许多无意义的标签，结构化较差

<!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>18. 额外标签法</title>
    <style>
        .box {
            width: 400px;
            border: 2px dashed red;
            margin: 0 auto;
        }
        .box-1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
        .box-2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: rgb(255, 0, 0);
        }
        .clear {
            clear: both;
        }
        .footer {
            height: 200px;
            background-color: rgb(197, 197, 197);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box-1"></div>
        <div class="box-2"></div>
        <div class="box-2"></div>
        <div class="box-2"></div>
        <span class="clear">额外标签法</span>
    </div>
    <div class="footer"></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>
        .box {
            border: 1px solid red;
        }
        .box-1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
        .clearfix {
            clear: both;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="box-1"></div>
        <p class="clearfix"></p>
    </div>
</body>
</html>

注意： 要求这个新的空标签必须是块级元素。

5.3 清除浮动之父元素 overflow

如何用 `overflow` 清除浮动？

给父元素添加 overflow 属性，将其属性设置为 hidden、auto、scroll 都可以；
通常设置 overflow: hidden；

用 `overflow` 清除浮动有什么优缺点？

优点：代码简单 / 好记忆
缺点：无法显示溢出部分，面试会被追问

<!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>19. 清除浮动 —— 父级添加 overflow</title>
    <style>
        .box {
            /* 以给父级添加 overflow 属性 */
            overflow: hidden;
            width: 400px;
            border: 2px dashed red;
            margin: 0 auto;
        }
        .box-1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
        .box-2 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: rgb(255, 0, 0);
        }
        .clear {
            clear: both;
        }
        .footer {
            height: 200px;
            background-color: rgb(197, 197, 197);
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box-1"></div>
        <div class="box-2"></div>
    </div>
    <div class="footer"></div>
</body>
</html>

5.4 清除浮动之 after 伪元素

`::after` 伪元素清除浮动的代码是什么？

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}

伪类表示标签的某个状态，没有内容，用 : 表示
伪元素在标签前 / 后增加内容，有内容但是不需要独立的标签，用 :: 表示
1. ::after 标签后添加内容
2. ::before 标签前添加内容

<!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 {
            border: 1px solid red;
        }
        .box-1 {
            float: left;
            width: 100px;
            height: 100px;
            background-color: springgreen;
        }
        .clearfix::after {
            content: '';
            clear: both;
            display: block;
            height: 0;
            visibility: hidden;
        }
    </style>
</head>
<body>
    <div class="box clearfix">
        <div class="box-1"></div>
    </div>
</body>
</html>

5.5 清除浮动之双伪元素

双伪元素清除浮动的代码是什么？

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

    .clearfix::after {
      clear: both;
    }

5.6 清除浮动总结

为什么清除浮动？

子盒子浮动 → 脱离原有位置 → 父级没有高度 → 影响后续标准流盒子

清除浮动的方法

方法	优点	缺点
额外标签法（隔墙法）	通俗易懂，书写简单	添加许多无意义的标签，结构化较差
父元素 `overflow: hidden;`	书写简单	无法显示溢出部分，面试会被追问
父级 after 伪元素	结构语义正确	IE 6~7 不支持伪元素
父级双伪元素	结构语义正确	IE 6~7 不支持伪元素