float浮动

一、


1、图片中如果改变第二列的浮动为float：right，就是变成div1 div3 div2这样排序了。
这是因为第二个<div>在source order上比第三个<div>等级要高 (DOM上第二个<div>先出现并声明了float right) ，所以在float order 上也会比第三个<div>等级要高。又因为两者同时像右浮动，第二个<div>就会更加地靠右。
2、清除浮动。
在没清除浮动之前，页脚是包装在空间最长的列，但是我们真正想要的页脚留在所有列的底部，所以可以用footer { clear: both;}清楚浮动。
3、整个宽度可能难以计算。
到目前为止，我们的例子是没有应用样式的浮动框。当你开始给这些框加上样式时，比如 borders, padding 等等，比如
div, footer {
padding: 1%;
border: 2px solid black;
background-color: red;
}问题就来了。就变成下图：

浮动.PNG

此时，您将看到您的布局已损坏 - 由于填充和边框引入的额外宽度，三列不再适合一行，因此第三列下降到另外两列。可以通过你的html加上下面的css。

• {
  box-sizing: border-box;
  }
  box-sizing 将我们box的width的计算方式变为了content + padding + border，而不是之前的content的width，所以当我们增加padding或border的width时，我们不会增加我们box的width。相反我们的content的width会缩小padding或border增加的宽度。（box-sizing Internet Explorer 8不支持 ）
  二、清除浮动（浮动会造成父容器高度坍塌，因此要清理浮动。如果不清除接下来的内容就不会重新起一行）
  1、上面说的clear：both（或者不要footer的话结尾处加空div标签 clear:both ）；
  2、父级定义 overflow:hidden 。

  <div class="links">
  <a href="#" class="forget">忘了密码？</a>
  <a href="#" class="register">注册新账号</a>
  </div>
  .links { overflow: hidden; }
  .links .forget { float: left; }
  .links .register { float: right; }

   3、.clearfix。将以下 .clearfix 类应用到需要清除浮动的父元素。
  

.clearfix::after {
content: '';
clear: both;
display: block;
}

参考链接：
1、https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Floats
2、https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context