CSS clear 属性

什么是 clear 属性

CSS clear 属性用于指定浮动元素的内容区域左右、上下不能出现浮动元素的情况。换句话说，如果想让元素之间相隔一定的距离，并且保证下面元素不受上面元素影响，就可以使用 clear 属性。

clear 属性的值

clear 属性有四个可选值，分别为：

• none：默认值，表示元素旁边可以存在浮动元素。
• left：表示在元素左侧不能有浮动元素。
• right：表示在元素右侧不能有浮动元素。
• both：表示在元素周围都不能有浮动元素。

如何使用 clear 属性

使用 clear 属性时，需要设置对应元素的样式。比如，以下例子设置一个 div 元素，使其下面不能存在浮动元素。

div {
  clear: both;
}

clear 属性的注意事项

• clear 属性只对浮动元素起作用，因此如果元素没有设置浮动样式，clear 属性是不起作用的；
• 当前元素应该在需要清除浮动的元素的后面，以使 clear 属性起作用；
• clear 属性仅影响后续元素，当前元素仍可能被前面的浮动元素影响。

clear 属性的使用场景

• 父元素不设置高度时，子元素使用 clear 属性避免浮动元素影响，使排版更流畅和美观；
• 在文字中插入图片时，为了保证排版的正确性，通常会添加一个清除浮动的元素；
• 在使用多列布局时，可以使用 clear 属性来避免不同列之间的浮动元素影响。

总结

CSS clear 属性常用于清除浮动元素带来的影响，能够有效排版页面，使页面更美观和规范。但在使用 clear 属性的时候需要注意，只有设置了浮动样式的元素才会受到影响，且应该将其设置在需要清除浮动的元素后面。