Float floating layout clear floating

Let's take a look at the problematic floating layout ：



You'll find that ul The following content will be crowded to the right , This is because the floating label has no height problem .

Next, let's talk about four ways to clear floats ：

1. Add... To the parent class that needs to clear the float overflow: hidden（ But this will directly hide the contents of the overflow part of the sub tag ）
2. Clear floating mode 2 ： Partition method , Add an empty tag below the one that needs to clear the float , Then add... To the empty tag clear: both attribute （ influence ： Add extra meaningless labels , Poor readability and maintainability ）
3. Clear floating mode 3 （ Partition method upgraded ）： Add... To the parent class that needs to clear the float after pseudo-classes , Also add the following styles （ There is no need to add additional labels ）
4. Clear floating mode 4 （ Double pseudo class clear floating ）： Add... To the parent class that needs to clear the float clear-fix The class can

The following code is posted directly to show （vue Code ）：

<template>
  <!-- Remove the floating -->
  <div class="clear-float-container">
    <ul class="clear-fix">
      <li> card 1</li>
      <li> card 2</li>
      <li> card 3</li>
      <li> card 4</li>
      <li> card 5</li>
      <li> card 6</li>
    </ul>
    <!-- Clear floating mode 2 ： Partition method , Add an empty tag below the one that needs to clear the float , Then add... To the empty tag clear: both attribute （ influence ： Add extra meaningless labels , Poor readability and maintainability ）-->
<!-- <div class="clear-float"></div>-->
    <p> Need to clear float </p>
  </div>
</template>

<script> export default {
       name: 'CleanFloat', data () {
       return {
      } } } </script>

<style scoped lang="less"> //  Clear floating mode 4 （ The double pseudo element clears the float ）： Add... To the parent class that needs to clear the float clear-fix The class can ----start .clear-fix:before, .clear-fix:after {
       content: ''; display: table; } .clear-fix:after {
       clear: both; } .clear-fix {
       *zoom: 1 //  compatible ie } //  Clear floating mode 4 （ The double pseudo element clears the float ）： Add... To the parent class that needs to clear the float clear-fix The class can ----end .clear-float-container {
       >ul {
       list-style: none; width: 336px; margin: 0 auto; //overflow: hidden; //  Clear floating mode one ： Add... To the parent class that needs to clear the float overflow: hidden（ But this will directly hide the contents of the overflow part of the sub tag ） li {
       float: left; margin-right: 12px; margin-bottom: 12px; padding: 10px; width: 100px; background-color: #9a6e3a; } } .clear-both:after {
       //  Clear floating mode 3 （ Partition method upgraded ）： Add... To the parent class that needs to clear the float after Pseudo elements , Also add the following styles （ There is no need to add additional labels ） content: ''; display: block; //  You need to convert inline elements to block level elements  clear: both; } .clear-float {
       clear: both; } } </style>