1. 犀牛前端部落首页
  2. CSS教程

CSS 清除float浮动

之前的文章中,俺跟大家讨论了CSS浮动。

当浮动多于一个元素时会发生什么?

如果在浮动的时候他们找到了另一个浮动的图像,默认情况下他们是一个挨着另一个水平堆叠。直到没有空间,它们将开始被堆叠在新的一行上。

假设我们在p标签中有3张内嵌图像:

CSS 清除float浮动

如果我们给这些图像添加float:left;

img {
  float: left;
  padding: 20px 20px 0px 0px;
}

这就是我们得到的结果:

CSS 清除float浮动

如果你添加给图片clear: left,这些将是垂直堆叠而不是水平;

CSS 清除float浮动

我用是clear:left。

  • left 清除左浮动
  • right 清除右浮动
  • both 清除左浮动和右浮动
  • none(默认)禁用清除

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4582.html

发表评论

登录后才能评论