vertical-align 属性、浮动

一、vertical-align 属性 （垂直对齐方式）

vertical-align: top;  上对齐
vertical-align：middle  中对齐
vertical-align：bottom  下对齐
vertical-align：baseline  基线对齐

作用：

1、解决图片下方间隙

2、处理图片和 "单行"文字 的垂直对齐方式

  <style>
        img{
            vertical-align: top/middle/bottom;
        }
 </style>
​
<div>
        <img src="https://bkimg.cdn.bcebos.com/pic/3ac79f3df8dcd100baa1df14eac75010b912c8fc81f8?x-bce-process=image/resize,m_lfit,w_536,limit_1/format,f_jpg" alt="">
​
        周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦周杰伦
    </div>

3、处理内联块和内联块 （内联和内联块）之间的垂直对齐方式

vertical-align：-10px

二、浮动

PC端网页布局三大核心：盒模型、浮动、定位

2.1 什么是浮动

设置了浮动的元素的标签，会脱离文档流（标准流）移动到父元素的指定位置。直到碰到父元素的边缘，就停止。
​
文档流：块标签正常从上到下排列，内联/内联块 标签从左到右排列   就是文档流/标准流
脱离文档流 就是  不占位

2.2 浮动的作用

1、之前的实现“图文环绕”
2、现在主要是实现“盒子并排” （需要盒子并排的标签 身上必须都要设置浮动，中间不放不浮动的标签）

2.3 浮动的属性

float:left;  左浮动
float:right;  右浮动
float:none;  默认  不浮动

2.4浮动的特点

1、浮动元素“脱离文档流”不占位
2、脱离文档流但是不脱离文本流（字、图片、input框）