关于浮动的注意

我们都知道浮动有三个值：
float:left;
float:right;
float:none;
但是浮动以后我们需要注意什么呢？
下面就总结一下：
1，浮动以后我们需要对父元素清除浮动。
为什么清浮动？先假设文档是这样。
假设黑色框是文档，红色框是一块元素，绿色框也是一块元素。假设红色框浮动了，会是什么情况？如下图
绿色框机会掉下来，这个时候就说明红色的框脱离了文档流（从上到下排列）假设我们在布局的时候只希望红色框浮动，但是不希望影响到后面的元素，这个时候我们就必须要清除浮动。
而且需要说明的是浮动只会影响到他后面的元素，就像盖房子一样，如果一共有十层楼，抽掉了第三层，四楼以上的会往下掉，但是一二层不会受到影响，这是一个道理。所以我们清浮动需要清的是它后面的元素。
清浮动的语法：
clear:left;
clear:right;
clear:both;
clear:left;是清除左浮动，假设一个元素是向左浮动的，那么它后面的元素就需要清除左浮动，如果它是向右浮动的，那么就需要清除右浮动，当然both这个值是用的最多的，他是左右浮动都可以清，所以我们一般用最多的就是clear：both；

<style>
        #box{
            width:500px;
            height:500px;
            margin:200px;
        }
        #box .red{
            width:200px;
            height:100px;
            background:red;
            float:left;
        }
        #box .green{
            width:300px;
            height:100px;
            background:green;
            clear:both;
        }
    </style>

  <div id="box">
        <div class="red"></div>
        <div class="green"></div>
    </div>

清完浮动，效果就是这样

这个时候绿色元素就会回来了，不掉下去，让红色区域很好的展示。