软件推广网站上海站群优化公司
目录
一、标准流
二、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：弹性盒子与容器之间间距相等