[分享]css中clear的属性有哪些

在CSS中，clear属性用于控制元素下方的浮动元素对该元素的影响。下面列出了clear属性的几个取值：

.clear {
    clear: left; /* 清除左侧浮动元素 */
    clear: right; /* 清除右侧浮动元素 */
    clear: both; /* 清除左右浮动元素 */
    clear: none; /* 不清除浮动元素 */
} 

其中，left和right指定清除相应方向的浮动元素，both指定清除左右浮动元素，none则表示不清除浮动元素。

下面是一个例子，其中红色块是浮动元素，黄色块是需要清除浮动的元素。

<div class="container">
  <div class="float-box"></div>
  <div class="need-clear"></div>
</div>

.float-box {
  float: left;
  width: 50%;
  height: 100px;
  background-color: red;
}
.need-clear {
  clear: both;
  height: 100px;
  background-color: yellow;
} 

如果不使用clear属性，黄色块将被红色块覆盖。但是应该注意，clear属性只对上方的浮动元素有影响，不会对下方的浮动元素产生任何影响。