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 也有效，但这样做可能会出现一个滚动条，这显然不是我们希望看到的。