浮动带来的影响以及怎么清除浮动

一、浮动带来的影响

float:left/right;原来是用来解决文字环绕的，后来发现做布局也可以，于是float布局在我们的布局中便经常使用了。float可以让块级元素在一行排列，大大方便了页面的布局，但是float也带来了一些问题，其中最大的影响便是高度坍塌的问题，即当我们给子元素设置了float属性，子元素的父级没有设置宽高时，我们将会发现父元素的宽度为子元素的宽度，但是高度却为0。当我们在浮动元素的后面写其他元素的时候，会发现浮动元素“压”在了后续元素的后面，这其实就是高度塌陷。
具体的例子如下

<div class="main"> 
    <div class="left"></div>
    <div class="right">right</div> 
</div>
<div class="footer">footer</div> 

<style>
    *{
        margin: 0;
        padding: 0;
    }

    .main {
        width:800px;
        background-color:#ccc;
        margin: 0 auto;
    }

    .left {
        width: 300px;
        height: 300px;
        background-color: red;
        float: left;
    }

    .right {
        width: 200px;
        height: 200px;
        background-color:blue;
        float: right;
    }

    .footer {
        width:800px;
        height: 50px;
        background-color: yellow;
        margin: 0 auto;
    }
</style>

二、如何清除浮动

1、利用overflow:hidden;，给浮动元素的父元素设置

.main{
  overflow:hidden;
}

2、在浮动的盒子下面再放一个标签，使这个标签的类名为clear

.clear{
  clear:both;
}

3、给浮动元素的父级元素加一个类名为clearfix

.clearfix:after {
   visibility: hidden;
   display: block;
   font-size: 0;
   content: " ";
   clear: both;
   height: 0 ;
}