css中clear的属性有哪些

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中,clear属性用于控制元素下方的浮动元素对该元素的影响。下面列出了clear属性的几个取值:.clear { clear: left; /* 清除左侧浮动元素 */ clear: righ

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

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

其中,leftright指定清除相应方向的浮动元素,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属性只对上方的浮动元素有影响,不会对下方的浮动元素产生任何影响。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中clear的属性有哪些

粉丝

0

关注

0

收藏

0

已有0次打赏