CSS浮动--浮动的使用/清除浮动

CSS浮动

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。
Float（浮动），往往是用于图像，但它在布局时一样非常有用。

网页布局准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘

！！！浮动特性（重要）：

• 脱离标准普通流的控制（浮）移动到指定位置（动），（俗称“脱标”）
• 浮动的盒子不再保留原先的位置
• 如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列
• 浮动的元素是互相贴靠在一起的，不会有缝隙，若父级盒子装不下这些浮动的盒子，多出的盒子会另起一行对齐
• 浮动的元素具有行内块元素的特性
• 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流

浮动元素经常和标准流父级搭配使用

线用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，复合网页布局第一准则

清除浮动

由于父级盒子很多情况下不方便给高度，但子盒子浮动由不占位置，就会影响下面的标准流盒子，因此引入清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题。
语法：
选择器{clear:属性值}
属性值：
left：清除左侧浮动的影响
right:清除右侧浮动的影响
both:同时清除左右两侧浮动的影响（最常用）

清除浮动的策略是：闭合浮动

方法一：额外标签法

也称隔墙感
会在浮动元素末尾添加一个空的标签，例<div style="clear:both"></div>或者其他标签<br>
//要求这个新的空标签必须是块级元素
优点：通俗易懂，书写方便
缺点：添加很多无意义的标签，结构化较差

方法二：父级添加overflow法

可以给父级添加overflow属性，将其属性值设为hidden（最常用）,auto或scroll
优点：简洁
缺点：无法显示溢出的部分

方法三： ：after伪元素法

是额外标签法的升级版，也是给父元素添加
代码：

.clearfix:after {
      content: "";
      display: block;  /*要转换为块元素*/
      height: 0;
      clear: both;   /*核心代码*/
      visibility: hidden;
    }
    
    .clearfix {/*控制兼容性*/
      /* IE6.7专用 */
      *zoom: 1;
    }

<div class="box clearfix">第一个</div>

优点：没有增加标签，结构更简单
缺点：要照顾低版本浏览器

方法四：双伪元素清除浮动

也是给父元素添加
代码：

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

.clearfix:after {
clear: both;
}

/* ie 6 7 专门清除浮动的样式*/
.clearfix {
*zoom:1;
}

<div class="box clearfix">第一个</div>

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米，腾讯