本文详细介绍了前端开发中的浮动(float)和定位(position)概念，包括浮动元素如何脱离文档流，不同类型的定位如相对定位(relative)、绝对定位(absolute)、固定定位(fixed)和粘滞定位(sticky)的工作原理及特点，以及定位时的偏移量(offset)设置。内容覆盖了浮动元素的布局影响和定位元素的层级提升，帮助读者深入理解这两种重要的布局技术。
前端学习笔记（HTML&CSS）（07）
浮动（float)
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
浮动的特点：
- 浮动元素会完全脱离文档流，不再占据文档流中的位置
- 设置浮动以后元素会向父元素的左侧或右侧移动，
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高
可选值：
- none 默认值 ，元素不浮动
- left 元素向左浮动
- right 元素向右浮动
如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：
最低0.47元/天 解锁文章
扫一扫
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
