什么是浮动

浮动就是让一个元素向左或是向右移动，并会影响其他元素排列。

浮动的特性

浮动最主要是为了什么？为了让多个元素能在一行水平排列。
浮动元素会生成一个块级框，而不论它本身是何种元素。所以可以把它当做块级元素，设置宽高。
一个浮动盒会向左或向右移动，直到其外边碰到包含块边沿或者另一个浮动元素的外边。如果存在行盒，浮动元素的上边沿会与当前行盒的上边沿对齐。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

因为浮动盒不在普通流内，在浮动盒之前或者之后创建的普通流中的块盒无法感知浮动盒的存在。但浮动盒之后的行盒会感知浮动元素的存在，并围绕浮动盒。

浮动元素常见的副作用有两个，一是父元素感知不到浮动子元素的存在导致高度塌陷；另一个是浮动元素对其后行盒产生影响，进而影响到行盒所在的块盒的大小和布局。

注意！如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

这里再解释一下“普通流”，“浮动”和“绝对定位”。

普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。

绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

浮动的情况

浮动元素一行放不下会下移。
浮动元素脱离普通流，父级无法发现身体内有浮动元素存在，高度塌陷，变为0。
浮动元素1设置的比较大，大家都左浮，1左浮，2左浮，3放不下，下移，左浮，被1卡住。
块盒看不到浮动元素，但是文本也就是行盒看得到浮动元素，所以包裹了浮动元素。把块撑大了，间接的对块级元素造成影响。
浮动元素宽度是收缩的。要自行设置宽度。
浮动元素是呈现块级特性的，可以设置宽度高度，内外边距。给行内元素设置float之后也会获得块级特性。

浮动的副作用

对后续元素位置会产生影响。
父级容器无法包裹子元素。

解决方法

例如有这么一个HTML代码

<div class="container">
  <div class="left">left</div> 
  <div class="right">right</div> 
</div>
<div class="footer">footer</div>

css里是这样的

.container {
  width: 500px;
  background-color: black;
}

.left {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}

.right {
  width: 200px;
  height: 200px;
  background-color: green;
  float: right;
}

.footer {
  width: 400px;
  height: 50px;
  background-color: blue;
}

我想让footer在container的left和right的下面，但是却失败了，因为首先因为left和right是浮动元素，container里没有其他的普通流内的元素，故container的高度变成了0，贴在了网页的最上面。而footer也不会看到浮动元素，故他会贴在container的下边，也就是网页的最上面。无视了left和right。
那么要怎么做呢？
我们可以给container添加一个类，叫做clearfix。
给clearfix加一个伪类。

clearfix::after{
    content:" ";
    display:block;
    clear:both;
}

并且把这个clearfix加到HTML的父级元素里去，变成
<div class="container, clearfix"> 
  <div class="left">left</div> 
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

这里，给这个新加的类一个伪类，让它跟在后面有一个行盒，虽然别的元素看不见浮动元素，但是行盒能看见他，所以行盒待在浮动元素的下面把container撑开了。并且使用了clear：both；让footer待在了浮动元素的下方。也可以随意设置一个content内容，让其的visibility: hidden; font-size: 0;也可达到同样的效果。

还有把父元素变为块级格式化上下文的方式，首先父元素包含浮动子元素（全部）时，高度会出现坍塌，变为0。而一个元素如果触发以下特性那就是bfc。

body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

这里我给父元素添加overflow: hidden;后父元素变成bfc，而bfc的布局规则之一就是，父元素会感知到浮动元素存在，从而包裹他。
也就是css变成如下状态：

.container {
  overflow: hidden;
  width: 500px;
  background-color: black;
}

.left {
  width: 200px;
  height: 200px;
  background-color: red;
  float: left;
}

.right {
  width: 200px;
  height: 200px;
  background-color: green;
  float: right;
}

.footer {
  width: 400px;
  height: 50px;
  background-color: blue;
}

也能达到清除浮动的目的。

关于浮动和清除浮动