总结布局方法（position、transform、float、grid、flex）

最新推荐文章于 2025-09-25 08:53:33 发布

原创最新推荐文章于 2025-09-25 08:53:33 发布 · 567 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #css #css3

本文详细介绍了CSS布局的五种主要方法：Position（包括static、relative、absolute和fixed）、Transform（用于元素的位移和旋转）、Float（影响文档流但不脱离文本流）、Grid（二维网格布局）和Flex（灵活的弹性布局）。通过这些布局方式，可以实现各种复杂的页面布局，如空间居中、并列、两栏、圣杯和三明治布局。同时，文章还讨论了各种布局对父元素及兄弟元素的影响，以及解决高度塌陷的方法。

总结布局方法（position、transform、float、grid、flex）

Position 布局有以下几个属性值:realtive、absolute、fixed、static。
static：无特殊定位，对象遵循正常文档流，默认取该值。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，某元素将定位在框架或浏览器窗口本身或其包含块的左上角的绝对位置，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以浏览器窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
Transform ：https://www.w3cplus.com/content/css3-transform
使用transform进行偏移旋转等配合其它布局
Float ：脱离文档流但是不脱离文本流
对兄弟元素的影响
.上面贴非float元素（一般float元素上面贴的都是非float元素）
.旁边贴float元素（靠左，或者靠右的时候贴float元素）
.不影响其它块级元素位置
.影响其它块级元素内部文本（三四两点就是特性一说的脱离文档流，不脱离文本流）

对父级元素的影响
.从布局上“消失”（相当于从父级的空间里面消失了，消失了意味着父级不会再管他的宽高）
.高度塌陷（因为在父级的空间里消失了，所以父级的高度有可能会塌陷，防止父级的高度塌陷的办法就是设置父级属性：overflow）
高度塌陷问题
.

clearfix::before,
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

Grid CSS Grid 网格布局教程 - 阮一峰的网络日志 (ruanyifeng.com)
Flex ：(80条消息) Flex 布局教程(完整篇）：语法篇作者：阮一峰_xiaoxiaojie12321的博客-优快云博客_阮一峰flex布局
空间居中、并列、两栏、圣杯、三明治布局：
(80条消息) 阮一峰老师只要一行代码，实现五种CSS经典布局(转载)_鸭绒的博客-优快云博客