列表浮动后，解决下拉菜单不显示问题

项目场景：

项目场景：列表浮动后，下拉菜单不显示

---

问题描述

通过overflow：hidden清除浮动造成下拉菜单不显示：

html中的布局：

<ul class="courseListBox">
        <li><a href="">首页</a></li>
        <li @click="flag=!flag">
          课程分类<img src="./img/向下.png" alt="">
          <div v-show="flag" >
            <p v-for="item in courseList" :key="item.id">{{item.title}}</p>
          </div>
        </li>
        <li>专属课程</li>
       <!-- <p style="clear: both;"></p> -->
</ul>

css中的样式：

.courseListBox {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}
.courseListBox > li {
  float: left;
  margin: 0 30px 0 0;
  font-size: 16px;
}

---

原因分析：

overflow：hidden的作用不只可以清除浮动，还有溢出的元素隐藏掉的作用。该bug形成的原因就是下拉菜单被溢出隐藏了

解决方案：

用其他清除浮动的方法：
除了overflow：hidden之外，还有额外标签法，伪元素清除浮动，双伪元素清除浮动
伪元素清除浮动和双伪元素清除浮动的本质其实就是额外标签法，一定要记得给不方便添加高度的对应父元素添加class="clearfix"类选择器
如下：

1、额外标签法：（不推荐）

<p style="clear: both;"></p>

2、伪元素清除浮动：给父级元素添加伪元素

.clearfix::after{	
	display: block; /* 使其成为块级元素后*/
	content: ""; /*为伪元素加入空内容，以便伪元素中不会有内容显示在页面中*/
	clear: both; /* 清除浮动*/
}

3、双伪元素清除浮动：给父级元素添加伪元素

.clearfix:before,
.clearfix:after {
      content: "";
      display:table;
      clear: both;
}

使用其他方法后可以成功显示出来：