浮动

浮动的简介

1. 浮动最初用于实现文字环绕效果
2. 现在，浮动是主流的布局方式之一

元素浮动之后的特点

元素浮动之后，称为浮动元素，具有如下特点：

1. 浮动元素脱离文档流
2. 多个浮动的元素会水平排列，一行放不下自动换行
3. 不论元素原来的显示模式是什么，设置成浮动之后，就是浮动元素，具有自己的显示特点：
   ① 水平排列，自动换行，不存在外边距的塌陷和合并，设置左右外边距auto不会居中（与块级区别）
   ② 设置宽高、内外边距都没有问题（与行内区别）
   ③ 不会被父元素作为文本去处理（与行内块和行内区别）
   
   
不论是行内元素还是块级元素，设置浮动之后都会具有如下特点：
不再独占一行
可以设置宽高
完美支持 margin 和 padding
默认宽度会根据内容进行计算
构成了 BFC

文档流： 文档流里的元素会按照顺序从上到下，从左到右排列。

• 浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
• 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

浮动元素产生的影响

① 对后面兄弟元素的影响

影响：

后面兄弟元素会占据浮动元素原来的位置，可能造成位置的重叠，浮动元素显示在上

解决：

方案一： 给紧邻这浮动元素的后面的兄弟元素设置 clear:both
方案二： 兄弟元素要浮动都浮动，浮动元素不要跟不浮动的元素做兄弟，可以把都浮动的用一个div包起来，不浮动的做叔叔

② 对父元素的影响

影响：

子元素浮动之后，不能撑起父元素高度，造成高度塌陷

解决：

方案一： 父元素设置固定高度
方案二： 父元素设置浮动
方案三： 父元素设置 overflow, 值只要不是 visible 都可以 设置为hidden
方案四： 给父元素添加个子元素，放在所有浮动元素的后面，该元素要求是块级元素，设置 clear:both
方案五： 原理同方案四相同，使用伪元素给父元素添加子元素，设置 clear:both (推荐)
伪元素 在浏览器解析的时候动态的解析，添加进去的元素，本质是一个选择器

伪元素 在浏览器解析的时候动态的解析，添加进去的元素，本质是一个选择器

父元素::after {
    content: "";
    display: block;
    clear:both;
}

浮动相关的 CSS 属性

CSS 属性	功能	属性值
float	设置浮动	left、right、none
clear	清除浮动的影响	left、right、both

清除浮动只能对子元素有影响，孙子不算，孙子需要单独清除浮动

.item {
    float:left
}
.item {
    float:right
}
/*float 属性的默认值是 none  表示没有浮动*/

浮动的元素会脱离文档流，按照指定的方向发生移动，遇到父级的边界或者是上一个浮动元素或者是上一个不浮动兄弟元素就停下来，所有，浮动元素前面的元素不会受到影响，后面的兄弟元素和父元素会受到影响。

• 后面的兄弟元素会当做浮动的元素不存在，可能会与浮动元素位置发生重合。
• 父元素： 浮动的元素脱离父级区域，无法撑开父元素的高度，造成父元素高度塌陷。进而会影响到父元素后面的兄弟元素，造成布局问题。

行内元素或行内块元素在布局中的特点

父元素设置的文本属性可以作用于行内元素和行内块元素

① 让行内块元素在父元素中水平居中

给父元素设置 text-align:center

② 让行内块元素在父元素中纵向居中

1. 给父元素设置行高
2. 给行内块元素设置 vertical-align:middle

行内元素或行内块元素之间的空白问题

① 元素之间的空白（左右）

产生原因：

代码中，元素之间的换行

解决方案：

方案一： 代码中，元素之间不写换行（不推荐）
方案二： 父元素设置字体大小为0； 如果行内块元素中还有文字单独设置字体大小。

② 底部的空白（图片的幽灵空白）

产生原因：

行内块元素与文字基线对齐，底部的空白就是基线与底线的距离

解放方案：

方案一： 父元素设置字体大小 0
方案二： 给行内块元素设置 vertical-align:bottom (推荐)
方案三： 经典解决方案，针对图片，将图片设置成块级元素

③ 文字内容个数不同的行内块元素水平排列无法对齐

产生原因：

1. 如果行内块元素中没有文字，该元素的底部与基线对齐
2. 如果行内块元素中有一行文字，文字与外面的基线对齐，进而影响行内块元素的位置
3. 如果行内块元素中有多行文字，最后一行文字与外面的基线对齐，进而影响行内块元素的位置

解决方案：

给行内块元素设置 vertical-align, 值不是 baseline 都可以解决问题