清除浮动的几种方式

不常用

1.外墙法

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

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

注意点：

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

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

2.内墙法

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

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

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

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

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

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

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

 1 #div1::before{
 2             content: "jfdshsfjg";
 3             width: 50px;
 4             height: 50px;
 5             background-color: grey;
 6             display:block;
 7         }
 8 #div1::after{
               /*指定添加的子元素中的存储的内容*/
 9             content: "jfdshsfjg";
               /*指定添加子元素的高度和宽度*/
10             width: 50px;
11             height: 50px;
12             background-color: grey;
               /*指定添加的子元素的显示模式*/
13             display:block;
               /*指定添加元素隐藏*/
               visibility:hidden;
14         }

常用的方法：

 1 #div1::after{
 2      /*子元素的内容为空 */
 3     content: "";
        /*变成层级元素*/
 4     display: block;
 5  /*!*   高度为0*!*/
 6     height: 0;
 7    /* !*设置为隐藏*!*/
 8     visibility: hidden;
 9     /*!*左右都没有浮动*!*/
10     clear: both;
11 
12 }

overflow：hidden作用：

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

清除浮动

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

*zoom: 1;

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

清除浮动的几种方式

推荐阅读