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