clear

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

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

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

clear: left
clear: none
clear: right
clear: 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;
}

执行结果

相关链接

• float