1.1 传统网页布局的三种方式

image.png

1.2 标准流（普通流/文件流）

image.png
但是标准流的方式很难做到更高级的需要，比如固定位置的侧边栏、导航栏、搜索栏，两个元素一个在盒子内的最左边，一个在最右边都是很难用标准方式定位的，所以此时就需要浮动和定位了。

1.3 浮动 (float)

为什么需要浮动

image.png
其实不使用浮动也可以实现，最基础的想法应该是让div变成行内块元素，然后将内外边距都为0，代码为：

  1.   <div></div>
  2.   <div></div>
  3.   <div></div>
  5.   <style>
  6.     * {
  7.       margin: 0;
  8.       padding: 0;
  9.     }
  11.     div {
  12.       height: 200px;
  13.       width: 200px;
  14.       display: inline-block;
  15.       background-color: pink;
  16.     }

但实际效果如下：可以看到div之间是有空隙的。
image.png
造成这种现象的原因是div被修改为行内块元素后会按照行内元素的规则显示，如果标签之间有回车，则默认会添加一个空格，所以可以将div写成一行就没有空隙了，但是这样不符合语法规范：

  <div></div><div></div><div></div>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      height: 200px;
      width: 200px;
      display: inline-block;
      background-color: pink;
    }

image.png
或者也可以让外边距往内缩一个空格大小的像素，但是介于每个用户的空格大小可能不同，这种做法不严谨。
image.png
以上两个问题用标准流都是很难实现的，所以我们需要浮动。

浮动的使用

给div标签添加浮动元素，float即可实现浮动

div {
      float: left;
      height: 200px;
      width: 200px;
      background-color: pink;
    }

image.png
image.pngimage.png