常用浮动方式

目录

一、标准流

 二、float浮动

三、 flex浮动

3.1flex组成

3.2 主轴对齐方式

3.3侧轴对齐方式

3.4修改主轴方向

3.5弹性盒子换行

3.6行对齐方式

---

一、标准流

标签在网页中的默认排布规则

例如：

块元素独占一行、行内元素可以一行显示多个

 二、float浮动

让块元素水平排列

属性名：float

属性值：

left：左

right：右

特点：

1.顶对齐

2.具备行内块显示模式特点

3.浮动的盒子对脱离标准流

4.父级宽度不够，浮动的子级会换行

注意事项

如果父级的宽度不够，浮动的盒子会掉下来

清除浮动

场景：子级浮动，父级没有高度，子级无法撑开父级高度（可能导致页面错乱）

解决办法：清除浮动（清楚浮动带来的影响）

方法一：

在父级元素最后添加一个块级元素，设置css属性clear:both

.clearfix{clear:both}

方法二：单伪元素法

.clearfix::after{

content:"";

display:block;

clear:both;}

方法三：双伪元素法

.clearfix::before,            #解决外边距塌陷问题

.clearfix::after{

content:";

display:table;}

.clearfix::after{

clear:both;}

方法四：overflow

父元素添加css属性overflow:hidden

三、 flex浮动

弹性布局，不会产生脱标

3.1flex组成

设置方式：给父级元素设置dlsplay:flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器

弹性盒子

主轴：默认水平方向

侧轴：默认垂直方向

3.2 主轴对齐方式

属性名：justify-content

属性值：

flex-start:默认值，弹性盒子从起点依次排列

flex-end:弹性盒子从终点依次排列

center：沿主轴居中排列

space-between：空白间距均匀分布在弹性盒子之间

space-around:空白间距均匀分布在弹性盒子两侧

space-evenly：弹性盒子与容器之间间距相等

3.3侧轴对齐方式

给弹性盒子设置

align-items：控制当前容器的所有弹性盒子

align-self：控制单个弹性盒子

属性值

stretch：沿侧轴拉伸至铺满（弹性盒子没有设置侧轴方向尺寸则默认拉伸）

center：沿侧轴居中排列

flex-start：从起点依次排列

flex-end：从终点依次排列

弹性盒子在侧轴方向没有磁场才能拉伸

3.4修改主轴方向

属性名：flex-direction

属性值：

row：水平方向（默认）

column：垂直方向

row-reverse：水平方向（从右往左）

column-reverse：垂直方向（从下往上）

3.5弹性盒子换行

弹性盒子可以自动挤压或拉伸，默认都在一行显示

属性名：flex-wrap

属性值：

wrap:换行

nowrap：不换行（默认）

3.6行对齐方式

单行无效

属性名：align-content

属性值

flex-start:从起点依次排列（默认）

flex-end:从终点依次排列

center:沿主轴居中排列

space-between：空白间距均匀分布在盒子之间

space-around：空白间距均匀分布在合作两侧

space-evenly：弹性盒子与容器之间间距相等