前端浮动

浮动


浮动定位是指

将元素排除在普通流之外,即元素将脱离标准文档流

元素将不在页面占用空间

将浮动元素放置在包含框的左边或者右边

浮动元素依旧位于包含框之内

浮动可以分为左浮动(float:left;)和右浮动(float:right;)

浮动的元素可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止经常使用它来实现特殊的定位效果。

用div来演示
在这里插入图片描述
没有浮动的框

如果把框 1 向右浮动

它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘
在这里插入图片描述
如果把框1向左浮动,

因为框 1 不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如下图:在这里插入图片描述
如果把所有三个框都向左浮动

框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框:三个框在同一行上显示
在这里插入图片描述

如果外面的边框太小

如果图中蓝色的框不够宽,无法放开三个横着的红色边框的话,那么其它浮动块会自动向下移动,直到有足够的空间
在这里插入图片描述
3被挤下来

浮动元素的外边缘不会超过其父元素的内边缘,而且浮动元素不会互相重叠,也不会上下浮动,任何元素都能浮动,其中像a标签本身不能浮动,但可以在css里设置属性来让它浮动(display:block;)

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值