CSS浮动与定位

布局

1. 浮动 float

浮动的概念和实例
  • float是css中的定位属性,用于设置标签对象(如:div标签盒子,span标签、a标签、em标签、html标签)的浮动布局。从其操作的标签上可知,所有的HTML元素都是支持浮动的。浮动后的元素display属性变为block
  • 浮动也就是我们所说标签对象浮动居左(float:left)靠右(float:right)。浮动框可以向左或者向右移动,直到它的外边缘碰到body边框或者另一个浮动框的边框为止。(原则之一)
  • 只要设置了浮动,元素就脱离了文本流,由于浮动框不在文档的普通流中,所以文档普通流中的块框表现的就像浮动框不存在一样。
    练习:
    在文本流(同一平面):
    注意标准流中,文字要在背景的上面一层,因为能看到文件,所以证明背景是在下面一层的。HTML标签的生态系统
    在这里插入图片描述
    在这里插入图片描述
    让box1浮动:
    在这里插入图片描述
    注意:如果说box1浮动起来之后,脱离了文档流,那么box1的背景、文档,向上浮动一层。box2的背景自然就藏在了box1的下面,文字不会,因为浮动一层,所以背景和文字是同级,是挡不住文字的。而box2的文档和box1的背景是同级,所以box2被box1的背景顶在了下面
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    很明显box1的背景和box2的文本在一层
    在这里插入图片描述
  • 浮动什么时候停靠?
    遇到浮动的block元素,遇到文档流边界。
清除浮动影响

在这里插入图片描述
在这里插入图片描述
给p标签加上背景,看p元素所占的位置:
在这里插入图片描述
可以发现浮动对P标签造成了影响,注意是后续盒子。

  • 清除浮动
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    虽然清除了浮动,但是P标签默认有16的外边距,这是浏览器的默认行为。但是我们可以看到,这个外边距没有起作用,塌陷进去了。无论设置多大都会塌陷进去。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
  • 这个浮动是不能给p标签设置外边距,因为外边距的高低是由内容决定的,内容的多少,无法确定,所以不能固定。要想撑开可以使用内边距。
    • 解决方法二:加一个br标签来清除浮动:
      在这里插入图片描述
    • 解决方法三:
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
子盒子浮动,父盒子缩为0;说明父盒子的高度如果不自己设置,是由内容撑高的。如果子盒子浮动是撑不起高度的。因为不在同一层,如果父盒子浮动起来,就又重新变为同一层,所以能撑起来
加一段文本:
在这里插入图片描述
overflow:hidden;重新计算高度后:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
原理:box2和box3是box的两个子标签。当两个子标签浮动起来之后,浏览器要重新计算他们的高度,当计算出来高度后,赋予box对应高度。这个其实叫设置固定高度,是浏览器二次刷新时进行的。
父盒子又变为了120像素,注意这个只能是浮动用,定位用没有效果。因为他们两个就不是一个层级的东西。

浮动的几个特性
  1. 必须停靠的边的元素display属性必须是block;
    a元素(内联元素)靠不住
    在这里插入图片描述
    在这里插入图片描述
    内联块元素也靠不住:
    在这里插入图片描述
    在这里插入图片描述
    只有块元素靠得住:
    在这里插入图片描述在这里插入图片描述
    或者让内联元素浮动自动转换成为块,但此块非彼块,它的宽和高如果不设置是自动的,并不会占满整行。
    在这里插入图片描述
    在这里插入图片描述
  • 如果内联元素浮动,那么内联元素会自动转换为block元素,可设置宽和高。
  1. 如果父元素的宽高未设置,那么父盒子将继承父元素的宽度,而高度只能由内容撑开。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    如果子元素浮动,父元素不浮动,而父元素高度未设置,那么标签和背景都属于地面级别元素,子元素的背景就高于了父元素的背景和标签本身,自然撑不开了。父元素就会缩回去
    在这里插入图片描述
    在这里插入图片描述
    如果父元素浮动,就变成了行内块元素,宽度就不继承了,也是自动撑开,而又和子元素变为了同级:
    在这里插入图片描述
    如果父元素只要有了宽高,那么子元素就会停靠。
    在这里插入图片描述
    在这里插入图片描述
    不管子元素浮不浮动,它都会向它的父元素看起,前提是父元素需要有高度,这个高度如果是子元素撑起来的话,那么子元素浮动之后,父元素就没有高度,变为0,这时就没办法向父元素看起了。但凡有高度,子元素就不能逃出父元素,必须向父元素看起
    在这里插入图片描述

  2. 浮动元素的外边界不能超过其浮动包含块的内边界
    如果说浮动元素外有父元素,那么父元素就是浮动元素的边界。浮动元素不可能超出父元素的内边距

  3. 浮动元素的外边界是另一浮动元素的外边界
    也就是说浮动元素之间不能覆盖,浮动元素的边界可以是另一个浮动元素的停靠点

  4. 浮动元素的顶端不能比之前出现的浮动元素的顶端更高
    浮动元素从上到下,从左到右。放不下另起一行

  5. 浮动元素顶端不超过当前行
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

实例

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
卡壳效果:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在父盒子上清除浮动,重新计算高度;
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

定位

  • 三个定位之间的区别,参见 https://blog.csdn.net/gaoyuan1044704446/article/details/79463999
  • 定位之后,relative的边界是相对于自己的。position的margin是相对于浏览器的
  • 使用相对定位之后、绝对定位之后、固定定位之后,margin还是存在的,因为是盒子模型所以不可能不管用。但是如果设置了left,top,right,bottom属性,那么方位优先。但如果方位未确定,定位后的元素还是可以被顶开的。如下:
    在这里插入图片描述
    在这里插入图片描述
  • 使用定位后,如何使得被定位的块居中?参见:https://blog.csdn.net/qq_37621289/article/details/82910652
    在这里插入图片描述
    在这里插入图片描述
    方法2:
    在这里插入图片描述
相对定位
  • 使用相对定位的盒子,它会相对于它原本的位置,通过偏移到达新的位置。
  • 使用相对的盒子仍在标准文本流中,它对父块和兄弟盒子没有任何影响。
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值