定义

一个浮动盒会向左或右移动，直到其外边（outer edge）挨到包含块级沿或者另一个浮动盒的外边。如果存在行盒，浮动盒的外top(边)会与当前行盒的top（边）对齐 如果没有足够的水平空间来浮动，它会向下浮动，直到空间适合或者不会再出现其他浮动了
因为浮动（盒）不在普通流内，在浮动盒之前或者之后创建的未定位的（non-positioned)块盒会竖直排列，就像浮动不存在一样。然而，接着（next to)浮动（盒）创建的当前及后续行盒会进行必要的缩短，为了给浮动（盒）的margin box让出空间。

脱离普通流

普通流是什么？
代码
浮动元素意义上不是真正的脱离文档流，和absolute不一样。

两个特性：

1. 块级元素设置浮动宽度可以收缩
2. 行内元素设置浮动，拥有块级的特性，可以设置margin,padding.

浮动的使用场景

1. 两栏布局
   左侧固定宽度，右侧自适应
   代码
   右侧固定宽度，左侧自适应
   代码

2. 三栏布局
   两侧宽度固定，中间自适应宽度
   

   image.png
   
   注意：顺序问题

通过浮动实现导航条

1.左浮动导航条
代码
2.右浮动导航条
代码

浮动的副作用：

1. 对后续元素位置产生影响
   代码

2. 父容器高度计算出现问题
   代码

总结：如果一个元素里只有浮动元素，那它的高度会是0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix ，即clear一个不浮动的 ::after 伪元素。

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

代码

清除浮动

clear既可以用于浮动又可以用于非浮动

当应用于非浮动块时，它将非浮动块的边框边界移动到所有相关浮动元素外边界的下方，这个非浮动块的垂直外边距会折叠。
当应用于浮动元素时，它将元素的外边界移动到所有相关的浮动元素外边框边界的下方。
这会影响后面浮动元素的布局，后面的浮动元素的位置无法高于它之前的元素。（参考mdn)

1. clear:left;要求该盒的top border边位于源文档在此之前的元素形成的所有左浮动盒的bottom外边下方
   代码

2. clear:right;要求该盒的top border边位于源文档中在此之前的元素形成的所有右浮动盒的bottom外边下方
   代码

浮动和负边距
两个浮动元素，如果因放不下导致其中一个下移，对下移的元素设置负margin值大于自身的宽度可以其上移。
代码