CSS浮动清除

清除浮动方式一：

给前面一个父元素一个高度

企业开发中，能不写高度就不写高度，所以这种方式用得很少

清除浮动方式二：

给后面的盒子添加clear属性

取值：

left         在左侧不允许浮动元素。

right         在右侧不允许浮动元素。

both         在左右两侧均不允许浮动元素。

none         默认值。允许浮动元素出现在两侧。（按照浮动元素的排序规则来排序）

inherit         规定应该从父元素继承 clear 属性的值。

注：当给某个元素添加clear属性后，这个元素的margin属性就会失效

清除浮动方式三：

隔墙法：（可以给墙添加高度）

1.外墙法：在两个盒子之间添加一个额外的块级元素，给这个额外添加的块级元素设置clear：both；属性

注：

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

2.外墙法不可以让第一个盒子使用margin-bottom属性

2.内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素，给这个额外添加的块级元素设置clear：both；属性

注：

1.内墙法可以让第二个盒子使用margin-top属性

2.内墙法可以让第一个盒子使用margin-bottom属性

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

注：企业开发中，不常用隔墙法清除浮动

伪元素选择器

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

格式：

标签名称：：before{

       属性名称：值；

}

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

标签名称：：after{

       属性名称：值；

}

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

清除浮动方式四：

用伪元素选择器给第一个盒子添加一个块级元素，然后给该块级元素设置clear: both;

例：

.box1::after{

            content: "";

            display: block;

            height: 0;

            visibility: hidden;

            clear: both;

        }

IE6无法兼容该方式，如果想让IE6兼容，则需要在上面代码后添加以下代码：

.box1{

        *zoom:1;

}

清除浮动方式五：

只需在box1中加入overflow: hidden;

overflow：hidden；

作用：可以将超出标签范围的内容裁剪掉；清除浮动；让里面的盒子设置margin-top之后，外面的盒子不被顶下来

注意点：IE6无法兼容该方式