清除浮动

原因：1、浮动的盒子脱离了标准文档流，会造成没有主动设置高度的父盒子失去高度；

示例：

 <div>
    <p>一段文字</p>
 </div>

当style为空，div作为p的父盒子是包住p的，所以div即使在没有主动设置高度的情况下，它的高也是与p的高一致，即：div由p的内容撑开。

p{
    float: left;
 }

当p浮动，它就脱离了标准文档流，从div中浮出来，即div中没有内容可以撑开，在没有主动设置高度的情况下，div的高度为0。

2、浮动的元素对其他元素有影响，这种影响会让两者相互贴靠，让页面布局混乱。

 

清除浮动方式一：

       主动给父盒子添加高度，这是因为没有高度的父盒子是关不住浮动的子盒子对其他元素的影响。

       但是这种做法不常用。

清除浮动方式二：

clear：both；

       使用该属性可以消除浮动带来的影响，缺陷：这个属性写在被影响的父盒子里，但是父盒子的margin失效。两个盒子会相互贴靠，无法使用margin属性分开。

清除浮动方式三：

（1）外墙法：通过增加一个div，并且给这个div添加clear：both；属性，可以通过给这个div添加height隔开上下两个盒子。

缺陷：ie6及以下浏览器只解析最小为12px的盒子，但是可以设置font-size解决。

（2）内墙法：把墙移到父盒子里，本质上是让父盒子有高度，就可以管住子盒子的浮动给其他元素带来的影响。

清除浮动方式四：

overflow: hidden;

优点一：本意四溢出隐藏，但是在使用过程中发现，如果给一个盒子添加此属性，那么这个盒子就有了高度，就可以管住子盒子的浮动；

优点二：可以高度自适应，父盒子的高可以依照子盒子的内容多少，大小来自适应。