控制元素浮动位置的方法

clear:

1、left，阻止元素浮动在该元素的左边；

2、right，阻止元素浮动在该元素的右边；

3、both，阻止元素浮动在该元素的左右两边；

4、none，默认值，允许元素浮动在该元素的左右两边。

由于浮动的元素不会影响其父元素的高度，所以如果要让浮动元素的祖先元素在高度上包含浮动元素，并消除浮动，可以使用clearfix方法或overflow方法代替clear: 。

一、clearfix方法：

.clearfix:before, 
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

...
<div class="container clearfix">
    <main role="main" style="float: left;">
        ...
    </main>

    <div class="sidebar" style="float: right;">
         ...
    </div>
</div>
...

对容器添加clearfix类会清除浮动的main和附注栏元素，从而让容器的高度等于两列中较高的那一个高度。

二、overflow方法：

.container {
    overflow: hidden;
}

在某些情况下，overflow: hidden 会将内容截断，对此要多加注意。有时使用overflow: auto 也有效，但这样做可能会出现一个滚动条，这显然不是我们希望看到的。