HTML详解连载（8）

本文介绍: 对浮动和对齐方式进行了细致的分析

专栏 链接 link

下面进行专栏 介绍

本专栏是自己学前端的征程，纯手敲的代码，自己跟着黑马课程学习的，并加入一些自己的理解，对代码和笔记
进行适当修改。希望能对大家能有所帮助，同时也是请大家对我进行监督，对我写的代码进行建议，互相学习。

开始喽

在这里插入图片描述

清除 浮动

方法一：额外 标签发

在父元素内容的最后添加一个块级元素，设置CSS属性 cle ar：bot h

方法二：单伪元素法

.clearfix::after {
content:””;
display:block;
clear:both;
}

方法三：双伪元素法

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

方法四：overflow

父元素添加CSS属性 overflow：h id den

浮动–总结

浮动属性 float，left 表示左浮动，right 表示右浮动

特点

浮动后的盒子顶对齐
浮动后的盒子具备行内块特点
父级宽度不够，浮动的子级会换行
浮动后的盒子脱标

清除浮动

子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果
双伪元素法

拓展

浮动本质作用是实现图文混排效果

在这里插入图片描述

Flex-认识

flex 布局也叫弹性布局，是浏览器提倡的布局模型，非常适合结构化布局，提供了强大的空间分布和对齐能力。
flex 模型不会产生浮动布局中脱标现象，布局网页更简单，更灵活

Flex-组成

设置方式：给父元素设置 di s play：flex，子元素可以自动挤压或拉伸

组成部分：

弹性容器
 弹性盒子

主轴：默认在水平方向

侧轴/交叉轴：默认在垂直 方向

flex——沿着主轴方向排列

Flex布局

属性名

justify–content

属性值

属性	效果
flex–start	默认值，弹性盒子从起点开始依次排列
flex–end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
s p ace–between	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子之间
s p ace–ar ound	弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧
s p ace-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等

在这里插入图片描述

侧轴对齐 方式

属性名

属性	效果
align–items	当前弹性容器内所有弹性盒子的侧轴对齐方式（给弹性容器设置）
align–self	单独控制某个弹性盒子的侧轴对齐方式（给弹性盒子设置）

属性值

属性	效果
str etc h	弹性盒子沿着侧轴线被拉甚至铺满容器（弹性盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

修改主轴方向

主轴默认在水平方向，侧轴默认在垂直方向

属性名

flex-direction

属性值

属性	效果
row	水平方向，从左向右（默认）
column	垂直方向，从上到下
row–re verse	水平方向，从右向左
column–re verse	垂直方向，从下到上

弹性伸缩比

作用

控制弹性盒子的主轴方向的尺寸

属性名

flex

属性值

整数数字，表示占用父级剩余尺寸的份数

弹性盒子换行

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

属性名

flex-wrap

属性值

属性	效果
wrap	黄行
no wrap	不换行（默认）

行对齐方式

属性名

align–content

属性值

属性	效果
flex-start	默认值，弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴剧中排列
sp ace–between	弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒子之间
sp ace–ar ound	弹性盒子沿主轴均匀排列，空白间距均匀分布在弹性盒子两侧
sp ace-evenly	弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等