清楚浮动方法&伪元素画横线/竖线一、清楚浮动介绍为什么要清除浮动？清除浮动是清除浮动带来的负面影响。因为子元素浮动了，

一、清楚浮动介绍

为什么要清除浮动？清除浮动是清除浮动带来的负面影响。因为子元素浮动了，脱离标准流，不再占用之前的位置，导致无法撑开没有设置高度的父元素，浮动的父元素高度为0，进而导致后续结构直接跑上来，所以我们要清除掉这种负面影响

二、清楚浮动的方法

清除浮动方法----直接设置父元素高度：浮动的父元素没高度，我可以加个高度，此方法建议内容确定的情况下使用，如果内容不确定的情况下不建议直接给父元素设置高度，此情况下高度一般是由内容撑开。
清除浮动方法----额外标签法：在父盒子内部创建一个撑起整个场面的托盘(盒子)，进而让父元素自动检测高度
清除浮动方法----单伪元素清除法：如果是无序列表结构，在父盒子内部放div不符合规范，我们可以用伪元素来帮我们创建一个盒子托起整个结构，创建伪元素后只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度

/* 单伪元素清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

清除浮动方法----双伪元素清除法：如果是无序列表结构，在父盒子内部放div不符合规范，我们可以用伪元素来帮我们创建一个盒子托起整个结构，创建伪元素后只需要给浮动的父元素添加clearfix这个类名即可让父元素自动检测高度

/* 双伪元素清除浮动 */
.clearfix::before,
.clearfix::after {
    content: '';
    display: table;
}

.clearfix::after {
    clear: both;
}

清除浮动方法----给父元素设置overflow：hidden 直接给父元素设置oh overflow: 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>Document</title>
    <style>
      h2 {
        position: relative;
        width: 300px;
        height: 60px;
        background-color: orange;
        margin: 50px auto;
        text-align: center;
        line-height: 60px;
      }

      h2::before,
      h2::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        /* 画横线 */
        width: 50px;
        height: 0;
        border-top: 4px solid #000;
      }

      h2::before {
        left: 20px;
      }

      h2::after {
        right: 20px;
      }
    </style>
  </head>
  <body>
    <h2>为你推荐</h2>
  </body>
</html>

画横线.png 2. 画竖线方法

h2::before,
      h2::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        /* 画横线 */
        width: 0;
        height: 50px;
        border-right: 4px solid #000;
      }

画竖线.png