一文搞定前端CSS常用布局

1.浮动

本意：

浮动最初的设计目的是为了实现文本环绕图片的效果，类似于报纸或杂志中常见的排版方式。通过给图片应用 float: left; 或 float: right;，可以使文字围绕图片排列。
优点：

简单实现文本环绕效果：这是浮动最原始且有效的用途。
布局灵活性：

1.当元素需要支持宽高的时候，并横向排列的时候，就可以用浮动

2.当元素一左一右进行排列，用浮动会比较方便（早期）
缺点：

破坏文档流：使用浮动后，元素会脱离正常的文档流，导致父级元素的高度塌陷问题，需要额外清除浮动（如使用 clear:both; 或者 overflow 属性设置为 hidden 等方法）。
维护复杂性增加：随着页面复杂度的增加，管理多个浮动元素变得困难，容易出现意外的布局行为。
不适合复杂的响应式设计：浮动对于现代响应式设计的支持不够友好，难以处理不同屏幕尺寸下的自适应需求。
实现代码如下

float left 左浮动 right 右浮动 none 不浮动

清浮动

不是把浮动清掉，是用来处理浮动元素脱离文档流，造成父级高度为0，页面蹿行的问题的操作，就是清浮动。 理解父级的高度，由于是利用子级的高度撑开的，如果子级浮动，脱离文档流，会造成父级高度为0，下面的元素会由于正 常文档流的原因，造成蹿行。

清浮动方式：

1.父级也浮动 弊端：左右居中会失效，通篇全是浮动 可以理解为：父级如果有浮动，子级不需要做清浮动的操作 2.父级加display:inline-block 弊端：左右居中会失效 可以理解为：父级如果有display:inline-block，子级不需要做清浮动的操作 3.给父级加高度 弊端：不利于扩展 可以理解为：父级如果有固定高度，并且万年不变，子级不需要做清浮动的操作 4.给父级加overflow:hidden; 弊端：裁刀，子级超出的部分会被干掉 overflow hidden 溢出隐藏 auto 出现滚动条 scroll 出现滚动条 5.伪类清浮动 弊端：代码太长，需要封装重复调用 clear: 就是表示元素的某一侧不允许出现浮动元素。 left 左边不许有 right 右边不许有 both 两边不许有 none 没有用 结构 样式 行为 三者分离 :after 表示也标签的后面插入一个内容 1.第一步： 在标签后面插入一个内容 #box1:after{ content:''; } 2.第二步： 把这个空字符变成块类型 #box1:after{ content:''; display:block; } 3.第三步: 通过clear:both;来清浮动 #box1:after{ content:''; display:block; clear:both; }

目前浮动布局已经被淘汰，尽量不要再项目中使用浮动

2.定位

定位是一种更加高级的布局手段；通过定位可以把元素放到页面的任意位置； 使用position属性来设置定位； 可选值：static：默认值，元素静止，不开启定位；relative：开启元素的相对定位； absolute：开启元素的绝对定位 fixed：开启元素的固定定位；sticky：开启元素的粘滞定位；

优点：

精准控制：可以非常精确地放置元素，适用于创建固定头部、侧边栏等需要精确定位的组件。

支持层叠上下文：通过 z-index 属性，能够控制元素之间的堆叠顺序，这对于构建层次丰富的界面至关重要。

局部调整：相对定位不会改变元素在文档流中的位置，但允许对其进行微调，适合用于局部修正布局。

缺点：

过度依赖可能导致布局僵硬：如果滥用绝对定位，可能会导致页面布局失去流动性，难以适应不同的屏幕尺寸和设备类型。

影响可访问性：某些情况下，绝对定位可能会影响内容的实际阅读顺序，从而对可访问性和搜索引擎优化产生负面影响。

维护成本较高：当页面结构发生变化时，基于定位的布局可能需要大量修改才能保持正确的显示效果。

下面我们细致讲一下区别

元素层级：

z-index只在“定位元素”（即position值为relative、absolute、fixed或sticky的元素）上生效。值越大越先显示

父元素的层级再高也不会盖住子元素；

偏移量：
当元素开启定位以后，我们可以通过偏移量来设置元素位置；
top：定位元素和定位位置上边的距离；
bottom: 定位元素和定位位置下边的距离；
定位元素垂直方向的位置由top和bottom两个属性来控制；
top值越大，定位元素越往下移动；
bottom值越大，元素越往上移动；
left：定位元素和定位位置左侧的距离；
right：定位元素和定位位置右侧的距离；
定位元素水平方向的位置由left和right两个属性控制；
left值越大，定位元素越靠右；
right值越大，定位元素越靠左；
top和bottom通常只用一个；
left和right通常也只用一个；

2.1相对定位

1.元素开启相对定位后，如果不设置偏移量，元素不会发生任何改变；
2.相对定位是参照元素在文档流中的位置进行定位的；
3.相对定位会提升元素的层级；
4.相对定位不会脱离文档流；
5.相对定位不会改变元素的性质，块还是块，行内还是行内；
效果图如下：

2.2绝对定位

开发中常用子绝父相 来进行页面布局 （子类使用绝对定位，父类使用相对定位）

1.开启绝对定位后，若不设置偏移量，元素的位置不会发生任何改变；
2.开启绝对定位后，元素会从文档流中脱离；
3.绝对定位会提高元素的层级；
4.绝对定位会改变元素的性质，行内变成块，高度由内容撑开；
5.绝对元素是相对于其包含块进行定位的；
包含块：
正常情况下，包含块就是当前元素最近的祖先块元素；
绝对定位元素的包含块，就是离它开启了定位的祖先元素，若所有的祖先元素都没有开启定位，则相对于根元素进行定位；

效果图如下：
有父元素开启定位

无父元素开启定位

2.3固定定位

1.固定定位也是一种绝对定位，所以固定定位的大部分特点与绝对定位一样；
2.唯一不同的是固定定位永远相对于浏览器的视口进行定位；
3.视口是固定不动的，根元素会根据滚动条的滑动而滑动；
4.固定定位不会跟随页面的移动而移动；

一般用于返回顶部按钮、悬浮客服、固定导航栏

示例代码如下：

2.4粘贴定位

粘滞定位与相对定位的特点基本一致； 不同的是粘滞定位可以在元素到达某个位置时将其固定；

示例代码如下：

3.弹性布局（flex布局）

"弹性布局" 用来为盒状模型提供最大的灵活性 任何一个容器都可以指定为flex布局， 当我们为父盒子设置为flex布局以后 子元素的float clear 和vertical-align属性将会失效，伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴，默认主轴方向就是x轴方向，水平向右，默认侧轴方向就是y轴方向，水平向下

注意：当父元素开启弹性布局之后，直接子元素提升为“弹性项目（flex items），行内元素状态改变，可以支持盒模型样式，但并不是变成块状元素

示例代码如下：

常用属性如下：

3.1 flex-direction 设置主轴方向

flex-direction属性决定主轴的方向（即项目的排列方向）注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的

默认值：row 默认从左往右

row-reverse 从右往左

column 从上到下

column-reverse 从下到上

3.2 justify-content : 设置主轴上的子元素的排列方式

默认flex-start 从头部开始 如果主轴是x轴 则从左到右

flex-end 从尾部开始排列

center 在主轴居中对齐(如果主轴是x轴 则水平居中)

space-around 平分剩余空间

space-between 先两边贴边 再平分剩余空间

3.3flex-wrap : 设置子元素是否换行

默认情况下 项目都排在轴线上 flex-wra属性默认是不换行的 当子元素宽度排列大于父元素宽度时默认不换行,而是缩小每个子元素来达到适应父元素的宽度

nowrap 默认 不换行

wrap: 换行

换行了，但是中间有空格，因为flex容器高度固定，两行内容总高度只有 200px（每行 100px），剩余 空间 被平均分配到两行之间的空白区域，使得第二行看起来“上下等距”。

3.4align-items : 设置侧轴上的子元素的排列方式(单行)

该属性是控制子项在侧轴（默认是y轴）上的排列方式在子项为单项（单行）的时候使用

flex-start : 默认 从上到下

flex-end : 从下到上

center 居中

stretch : 拉伸 注意在使用时子元素不要设置高度

3.5align-content : 设置侧轴上的子元素的排列方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的

flex-start : 默认 在侧轴的头部开始排列

flex-end : 在侧轴的尾部开始排列

center : 在侧轴中间显示

space-around : 子项在侧轴平分剩余空间

space-between : 子项在侧轴先贴在两头 再平分剩余空间

3.6 flex-flow：复合属性

相当于同时设置了 flex-direction 和 flex-wrap

3.7 flex : 子项目占的份数

flex:1 等价于 flex:1 1 0%

复合属性如下：

3.8 align-self : 控制子项自己在侧轴的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

3.9 order : 定义子项的排列顺序 (前后顺序)

数值越小，可以为负数，排列越靠前，默认为0。注意：和z-index 不一样。

4.二维布局（grid布局）

Grid布局是CSS中一种强大的二维布局系统，允许开发者在行和列两个维度上精确控制元素的位置和大小。与Flexbox（一维布局）不同，Grid适用于复杂布局需求，如网页整体结构、仪表盘等。

常用属性如下：

光看文字还是乏力，下面代码演示：

4.1grid-template-column定义列的数量和宽度

grid-template-column可以填写px（像素） fr（比例等分）,auto(自适应) 等单位

4.2grid-template-rows设置行列之间的间距

4.3justify-content水平对齐和align-content垂直对齐