CSS中float为什么要clear

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

在CSS中使用float属性可以让元素左浮动或右浮动,但是如果父元素中有其他浮动元素或者使用过float属性的元素,则可能会造成浮动元素错位、不居中、被遮挡等问题,这时候就需要使用clear属性来解决

在CSS中使用float属性可以让元素左浮动或右浮动,但是如果父元素中有其他浮动元素或者使用过float属性的元素,则可能会造成浮动元素错位、不居中、被遮挡等问题,这时候就需要使用clear属性来解决。

.clearfix::after {
  content: ';
  display: table;
  clear: both;
} 

在上面的代码中,我们使用了.clearfix类来对父元素进行清除浮动的操作,::after伪元素在父元素内部生成一个空元素,然后使用clearfix类将该伪元素清除浮动。

除了使用类来清除浮动,我们还可以使用clear属性为每个元素单独设置清除浮动的方式:

.clear {
  clear: both;
} 

如上代码中,我们将一个元素的clear属性设为both,以清除该元素之前左浮动或右浮动的浮动元素。

总之,在使用float属性时,遇到浮动元素错位等问题,记得清除浮动!

文章说明:

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

题图来自Unsplash,基于CC0协议

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

评论列表 评论
发布评论

评论: CSS中float为什么要clear

粉丝

0

关注

0

收藏

0

已有0次打赏