web前端开发 CSS03(重叠元素、浮动)

1、重叠元素

在对元素进行定位时,它们可以与其他元素重叠。

z-index 属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面)。

元素可以设置正或负的堆叠顺序。

具体可见:

CSS样式层叠顺序

2、浮动

float 属性规定元素如何浮动。

clear 属性规定哪些元素可以在清除的元素旁边以及在哪一侧浮动。

2.1 float属性

float 属性用于定位和格式化内容,例如让图像向左浮动到容器中的文本那里。

float 属性可以设置以下值之一:

  • left - 元素浮动到其容器的左侧
  • right - 元素浮动在其容器的右侧
  • none - 元素不会浮动(默认值)

实例:

未设置浮动

在这里插入图片描述

图片设置左浮动:float:left;

在这里插入图片描述

右浮动和左浮动用法一样且效果一样,只不过图片浮动到了右边。

none和不设置浮动时的效果一样,是默认值,不需要浮动不用设置。

2.2 clear属性

clear 属性指定哪些元素可以浮动于被清除元素的旁边以及哪一侧。

clear 属性可设置以下值之一:

  • none - 允许两侧都有浮动元素(默认值)
  • left - 左侧不允许浮动元素
  • right- 右侧不允许浮动元素
  • both - 左侧或右侧均不允许浮动元素

使用 clear 属性的最常见用法是在元素上使用了 float 属性之后。

在清除浮动时,应该对清除与浮动进行匹配:如果某个元素浮动到左侧,则应清除左侧。您的浮动元素会继续浮动,但是被清除的元素将显示在其下方。

也就是说,上面的图片设置了左浮动,让文字设置clear:left;,则效果和未设置浮动时一样,文字会在图片下面。设置右浮动,就让文字右清除浮动。

2.3 clearfix

如果一个元素比包含它的元素高,并且它是浮动的,它将“溢出”到其容器之外:

如图,父元素没有高,图片(子元素)有高并且浮动。

在这里插入图片描述

可以看出,父元素的边框成了一条线,这是因为子元素浮动脱离了文档流,父元素获取不到子元素的高度。

给父元素添加:overflow:auto;来解决这个问题。

在这里插入图片描述

可以看见父元素被撑起来了。

清除浮动还有别的方式,可以参考:

CSS清除浮动的五种方式

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值