【css】浮动的复习

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

2.浮动的特性

1. 浮动元素会脱离标准流（脱标）
   浮动的盒子不在保留原先的位置
2. 浮动的元素会一行内显示并且元素的顶部对齐
3. 浮动的元素会有行内块的特性
   任何元素都可以浮动，添加浮动之后有行内块元素相似的特性（例如行内元素浮动了，就不需要转换为块级/行内块元素，就可以直接给高度和宽度）

3.浮动元素经常和标准流父级搭配使用
1.先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则
2.一个元素浮动了，理论上其余的兄弟元素也要浮动，以防引起问题

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

例如：小米网页

4.清除浮动
因为父级盒子在很多情况下不能给定高度，但是子盒子浮动又不占有位置，最后父级高度为0，就会影响下面的标准盒子
，所以需要清除浮动。

1. 额外标签法（隔墙法，w3c推荐做法）
   在浮动元素最后一个标签（块级元素，行内元素不可以）添加cssclear：both
2. 父级添加overflow属性
   给父级添加 overflow 属性，将其属性值设置为hidden，auto，scroll。 （优点：代码简洁，缺点：无法显示溢出部分，直接把溢出部分切掉，显示不了）
3. 父级添加after伪元素
   
   在该盒子的后面生成了一个行内元素，改为block
4. 父级添加双伪元素