清除浮动

   <div class="div1">
           <p></p>
           <p></p>
           <p></p>
   </div>
   <div class="div2">
           <p></p>
           <p></p>
           <p></p>
   </div>

---

1. 给前面一个父元素设置高度

---

 .div1{
    height：100px；
  }

---

2. 给后面的盒子添加clear属性 取值none

---

   `.div2{
        clear：none；
   }`

---

3、隔墙法

---

3.1 外墙法
1。 在两个盒子中间添加一个额外的块级元素
2。 给这个额外添加的块级元素设置clear：both；属性
注意点：可以让第二个盒子使用margin-top属性，但不能让第一个盒子使用margin-bottom属性

---

3.2 内墙法
1。在第一个盒子中所有子元素最后添加一个额外的块级元素
2。给这个额外添加的块级元素设置clear：both；属性
注意点：可以让第二个盒子使用margin-top属性，也能让第一个盒子使用margin-bottom属性

外墙法和内墙法区别：外墙法不能撑起第一个盒子的高度，而内墙法可以撑起第一个盒子的高度，在企业中不常用隔墙法

---

4、利用伪元素：

类名：：after {
         content："";    //设置添加的子元素内容为空
         display：block；  //设置添加的子元素为块级元素
         height：0；  //设置添加的子元素高度为0
         visibility：hidden； //设置添加的子元素看不见
         clear：both；  //给子元素设置clear：both；属性
     }

如果有浏览器不兼容则设置 类名 { *zoom：1；}

---

5、给第一个盒子设置overflow：hidden

---

.div1{
   overflow：hidden；
}