浮动

前题:

标准文档流(也称为标准流)指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。

标准流的微观现象:
空白折叠现象。(在代码编辑中,行内元素之间无论多少个空格、换行、tab,都会折叠为一个空格。比如,如果我们想让img标签之间没有白色空隙,必须紧密连接)
高矮不齐,底边对齐。(图文混排会出现内容高矮不齐,底边对齐的情况。)
自动换行,一行写不完时,换行写。


脱离标准文档流:
标准文档流里面的限制很多,比如要实现既要并排,又要设置宽高,此刻就要脱离标准流。
CSS中有三种手段,使一个元素脱离标准文档流:
1.浮动(float)
2.绝对定位
3.相对定位

一、浮动

float属性设置

序号 属性 作用
1 left 元素向左浮动。
2 right 元素向右浮动。
3 none 默认值。元素不浮动。
4 inherit 继承父元素的浮动。

元素浮动后只能左右移动而不能上下移动。一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动元素之后的元素将围绕它,浮动元素之前的元素将不会受到影响。

浮动元素排序规则
相同方向上的浮动元素,先浮动的元素会显示在前面,后浮动的元素会显示在后面。
不同方向上的浮动元素,左浮动会找左浮动,右浮动会找右浮动。
浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来确定。
如果第一个元素是左浮动第二个元素是不浮动第三个元素是右浮动,那么第三个元素的右浮动会另起一行浮动,会在第二行的右边右浮动以此类推(个人实验出来的结果)

浮动有三种性质:
性质1:浮动元素的脱标
当某一个元素浮动之后,那么这个元素看上去就像被从标准流中删除了一样,这个就是浮动元素的脱标。

性质2:浮动的元素互相贴靠
如果父元素的宽度能够显示所有浮动元素那么浮动的元素会并排显示。
如果父元素的宽度不能够显示所有浮动元素,那么会从最后一个元素开始往前贴靠。
如果贴靠了前面所有浮动元素之后都不能显示,最终会贴靠到父元素的左边或者右边。

性质3:浮动的元素有“字围”效果
假设让容器div浮动,在容器内的p不浮动。 div挡住了p,但不会挡住p中的文字,p中的文字围绕着div,便形成了“字围”效果。

性质4:收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为内容的宽度(这点非常像行内元素)。div本身是块级元素,如果不设置widh,它会单独霸占整行;但是,设置div浮动后,它会收缩。

  • 浮动(float)包裹和崩溃
    • CSS塌陷:在文档流中,一个块级元素如果没有设置height,其height是由子元素撑开的。也就是子元素多高,父元素就多高。但是为子元素设置浮动后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱,也就是所谓的高度塌陷。

绝对定位

相对定位

 

 

人已赞赏
CSS笔记

行级元素与块级元素

2020-2-5 10:52:11

CSS笔记

包裹特性

2020-2-5 12:39:18

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
有新消息 消息中心
搜索