清除浮动的几种方式

不常用

1.外墙法

在两个盒子中间添加一个额外的块级元素

在给这个额外添加的块级元素设置： clear : both;属性

注意点：

外墙法可以让第二个盒子使用margin-top

外墙法不可以第一个盒子使用margin-bottom

2.内墙法

外墙法可以让第二个盒子使用margin-top

外墙法可以第一个盒子使用margin-bottom

3.外墙法和内墙法的区别？

   外墙法不能撑起盒子的高度，而内墙法可以撑起第一个盒子的高度

4.什么是伪元素选择器？

  给指定标签的内容前面添加一个子元素，或者给指定标签的内容的后面添加一个子元素

  给指定元素的内容的前面和后面添加内容

#div1::before{
            content: "jfdshsfjg";
            width: 50px;
            height: 50px;
            background-color: grey;
            display:block;
        }
#div1::after{
               /*指定添加的子元素中的存储的内容*/
            content: "jfdshsfjg";
               /*指定添加子元素的高度和宽度*/
            width: 50px;
            height: 50px;
            background-color: grey;
               /*指定添加的子元素的显示模式*/
            display:block;
               /*指定添加元素隐藏*/
               visibility:hidden;
        }

常用的方法：

#div1::after{
     /*子元素的内容为空 */
    content: "";
        /*变成层级元素*/
    display: block;
 /*!*   高度为0*!*/
    height: 0;
   /* !*设置为隐藏*!*/
    visibility: hidden;
    /*!*左右都没有浮动*!*/
    clear: both;

}

overflow：hidden作用：

超出标签范围内的文字去掉

清除浮动

注意：浏览器兼容，上面的清除方式，在谷歌浏览器里可以，但是在ie浏览器里不可以，所以需要加入 

*zoom: 1;

#div1{
    background-color: grey;
    overflow: hidden;
    margin-bottom: 10px;
    *zoom: 1;
}