清除浮动

1.浮动的负作用

<1>背景不能显示

      由于浮动的产生，对父级设 background背景/背景颜色或背景图片，而父级不能被撑开，导致CSS背景不能显示

<2>边框不能撑开

     如果对父级设置边框属性（ border），而子级里使用了float属性，产生浮动，则父级不能被撑开，故导致边框不能随内容而被撑开

<3>margin padding值不能正确显示

        浮动导致父级子级之间设置的css padding、css margin属性值不能正确表达。特别是上下边的padding和margin不能正确显示

2.清除浮动的方法(此方法兼容各大浏览器)

《1》方式一：给前面一个元素设置高度

注意点：在企业开发中，我们能不写高度就不写高度，所以这种方式用的比较少

《2》方式二：给后面一个元素添加clear属性

取值：none:默认取值，按浮动元素的规则来排序(右浮动找右浮动,左浮动找左浮动)

left:不要找前面的左浮动

right:不要找前面的右浮动

both:不要找前面的左浮动和右浮动

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

《3》方式三：隔墙法

（1）外墙法：在两个盒子之间添加一个额外的块级元素，并且给这个块级元素添加clear:both;属性

注意点：外墙法可以让第二个盒子使用margin-top属性，但不可以让第一个盒子使用margin-bottom属性。一般在企业开发中，是直接给额外添加的块级元素添加一个高度

（2）内墙法：在第一个盒子中所有子元素最后添加一个额外的块级元素，并且给这个块级元素添加clear:both;属性

注意点：内墙法可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性。

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

《4》方式四：伪元素选择器：

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

（1）格式一:给指定标签的内容前面添加一个子元素

标签名称：：before{

属性名称：值；

content:；

给指定添加的子元素中存储的内容

width: ;

height: ;

给指定添加的子元素的宽度和高度

display:block;

给指定添加的子元素的显示模式

visibility:hidden;

隐藏添加的子元素}

（2）格式二：给指定标签的内容后面添加一个子元素

标签名称::after{

属性名称：值；

content:；

设置添加的子元素的内容为空

height:0 ;

设置添加的子元素的高度为0

display:block;

设置添加的子元素为块级元素

visibility:hidden;

隐藏添加的子元素

clear:both;

}

兼容IE6：给第一个盒子添加

.box1{*zoom:1;}

《6》 方式六：overflow:hidden;

作用：

（1）可以将超出标签范围的内容裁剪掉

（2）可以清处浮动

（3）可以通过overflow:hidden;让里面的盒子设置margin-top之后，外面的盒子不被顶下来(给外面的盒子添加边框也可以防止里面的盒子被顶下来)

注意点：可以让第二个盒子使用margin-top属性，也可以让第一个盒子使用margin-bottom属性