目录

clear

clear 指定一个元素是紧挨着上一个浮动元素，并必须移动到该元素的下方。

当应用在浮动元素时，是将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响到后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。

当应用于非浮动元素时，将元素的边框边界移动到所有相关的浮动元素外边界的下方。这会导致外边距折叠不起作用。

 

语法

clear: left
clear: none
clear: right
clear: both

值

值描述
none 此关键词表示元素不会向下移动清除之前的浮动
left 此关键词表示元素被向下移动用于清除之前的左浮动
right 此关键词表示元素被向下移动用于清除之前的右浮动
both 此关键词表示元素被向下移动用于清除之前的左右浮动

例子

HTML 

<div id="red">
</div>
<div id="orange">
</div>

CSS 

#red {
     width: 200px;
     height: 50px;
     background: red;
     float: right;
}
#orange {
     width: 200px;
     height: 50px;
     background: blue;
     clear: both;
}

执行结果

参考

相关链接


跳至内容顶部