html的浮动属性,CSS浮动属性

在页面布局中CSS里面的浮动属性(float)是我们经常用到的属性,也是比较重要的属性。浮动属性控制着块状元素的显示位置,可以使块状元素在同一行显示,整个页面布局中,浮动属性的使用频率是最高的。

CSS浮动属性分为:float:left;控制元素左浮动,float:right;控制元素右浮动。浮动的显示规则是浮动对象会像左或者右移动直到遇到边框(border)、填充值(padding)、外边界(margin)或者另一个块元素为止。

我们都知道块状元素是独占一行的,即使我们给元素设置宽高,使他不能占满一整行,但是块状元素右边空余位置还是不会出现任何内容。

我们一起来看一下代码:

179dde60e404df1d7f324844956ac5ae.png

显示结果:

bd04f35845054f084d102ca868f5f09c.png

那么,如果我们想让块状元素并排显示就要用到我们的浮动了。

代码如下:

4252eb96d583e255f07993e1ceb2945f.png

显示结果:

4c67ebdfd805871558dab8b99757ceda.png

浮动元素的作用是让上下排列的元素并排显示,元素添加浮动之后,就飘起来了,原本在标准文档流里额位置就不在占有了,后面的内容会把位置补上去。如果有N个元素要在一排并列显示,那么着N个元素都需要添加浮动属性。 添加了浮动之后的属性,对margin:0 auto;就不生效了。

大家赶快实际操作练习一下吧!

标签:浮动,显示,元素,块状,CSS,属性

来源: https://www.cnblogs.com/yj888888/p/12391551.html

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值