css：float浮动

一、基础概念

• 标准流（文档流）：标签默认在网页中显示的初始排版顺序；
• 浮动流：设置了float属性的标签；

二、使用

• float: none/left/right；

• 目的：让标签脱离文档流，使原本竖向排列的标签横向排列；

三、注意事项

• 两个元素，第一个浮动了float: left，第二个没有浮动，浮动的元素会把没有浮动元素给覆盖掉;
• 两个元素，第一个没有浮动，第二个有浮动，两个元素的位置保持不变;
• 两个元素，都浮动，当整体宽度不够的时候，就会把第二个元素挤到下一行；
• 文本会默认环绕在浮动元素的周围；

• 内联元素设置了浮动后，就可以设置宽和高；

四、清除浮动

1. 高度塌陷

        (1) 导致原因：实际开发中，要求高度自适应，当前元素不设置具体的宽高数据，让其子元素撑起，在这种情况下，若是子元素设置了float，就会发生高度塌陷；

        (2) 解决：

                ① overflow:hidden;文本溢出

                ② 在设置了浮动元素的同级元素下面，添加空元素，这个空元素不能设置样式：

<div class="div1"></div>
<div class="div2"></div>
<div class="clear"></div>

.clear {
    clear:both;
}

2. 万能清除法: 定义一个类名，使用伪元素：after，并把类名赋给被浮动元素的父级元素；

clear:after {
    display：block；
    clear: both;
    content: "";
    visibility: hidden;
    height: 0,
}