浮动元素详解

为什么需要浮动元素？

1. 行内元素（包括文字、input、button等等）环绕浮动元素，这也是float设计之初的目的，可以实现文字环绕图片等效果
2. 较早时期用来进行页面布局，现在有了inline-block、flex、grid等等更方便的方法

浮动元素布局原理

浮动元素会根据属性值向左或向右浮动，浮动元素会脱离普通文档流，进入浮动流，浮动流内的浮动元素可以左右移动，直至外边缘碰到包含块或其他浮动元素，会使得块级元素无视浮动元素且行内元素环绕浮动元素（了解过层叠上下文的同学就会知道浮动层实际介于块级元素层和行内元素层之间）

下面我们来看看各种浮动情况下的效果，页面元素、效果如下：

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

• 两个子元素均为float:left
  
  这里我们发现：左浮动时，为由右向左移动，且下一行元素移至上一行时同样是由右向左

• 两个子元素均为float:right
  
  同理，右浮动时，为由左向右移动，且下一行元素移至上一行时同样是由左向右

• 仅第二个子元素为float:right
  
  这里我们发现：若浮动元素的上个块级元素不为浮动元素，其不可向上移动（上个元素为行内或行内块级时会上移）

清除浮动

clear:left/right/both

即不允许左/右两边有浮动元素，当前行上不会再又浮动元素（注意用于设置clear样式的div不要设置float）

常用方式：

// 在需要清除浮动的元素的上侧或下侧添加div，并设置clear样式
.clear{
  clear: both;
}
// 设置包含浮动元素的容器元素的伪元素
.wrapper-clear::after{
  content: '';
  display: block;
  clear: both;
}
// 设置父元素overflow: auto
// 将父元素也变为BFC