html-浮动的三种方式

一、最近用到了浮动的几种方式，在这里做一下总结

1. 文档流和文本流的概念：

①. 文档流（normal flow）：在html页面中，是相对于盒模型来说的

②. 文本流（text flow）：在html页面中，是相对于文本来说的

2. 浮动的理解：类似ps中图层的概念或者word文档中我们设置图片版式中有浮入文字上方

3. flaot方式的浮动

①. 理解：脱离于文档流，但不脱离于文本流（半脱离）；

②. 代码测试

<div class="div1">              
    123
</div>
<div class="div2">
    456
</div>
<div class="div3">
    789
</div>

.div1{
    width: 200px;
    height: 200px;
    background-color: red;
}
.div2{
    float: left;
    width: 200px;
    height: 100px;
    background-color: blue;
}
.div3{
    width: 200px;
    height: 200px;
    background-color: green;
}

③. 效果图

④. 效果图解释：

• 如图：789这三个字并没有因为div2是浮动元素而占据在div3的最左边和456重叠，并没有忽略div2浮动元素所占据的位置，这就是我们之前所说的半脱离状态（脱离了文档流，未脱离文本流）。如果没有理解的话，可以继续看下方的absolute的例子进行比较。

  ⑤. 其他理解

• 浮动元素在会一直向左直到碰到其他浮动元素/边框才会停止（float的特点），例如将div1设置为left，div2也设置为left，他们在视觉上会在第一层进行“并排”，类似于发生了“挤压”的感觉；如果我们只设置div2为left，他会在视觉上进行上下排列，div2只是进行了向左浮动“碰”到了左边框而已。

  4. absolute绝对定位方式的浮动

  ①. 理解：absolute会根据第一个祖先的位置（第一个不是默认static的元素，如父亲->爷爷->祖爷爷），通过设置top、bottom、left等相对值来进行位置的判定

  ②. 代码测试：

  <div class="div1">
       123
  </div>
  <div class="div2">
      456
  </div>
  
  <div class="div3">
      789
  </div>
  html,body{
  //防止body自带的margin为8对结果产生干扰，因此我们将margin设置为0
    margin: 0;
  }
  .div1{
    width: 200px;
    height: 200px;
    background-color: red;
  }
  .div2{
    float: left;
    width: 200px;
    height: 100px;
    background-color: blue;
  }
  .div3{
    position: absolute;
    top:200px;
    left: 0;
    width: 200px;
    height: 200px;
    background-color: green;
  }

  ③. 效果图：

  

  ④. 效果图解释：

• 这里我们的div3的父元素是body元素，因此他相对于body进行绝对定位，刚好和顶部相差了红色的高度
• 和之前的float不同，他其中的文本内容789并没有在乎div2的框，789这三个字就直接和456进行了重合，也就是说absolute的元素他不仅脱离了文档流，也脱离了文本流

• 这里我们做了一个小测试，看他会不会和float的元素产生碰撞，事实证明并不会，absolute的拳头还是比flaot的元素看起来要猛一点，有点类似第三个图层的感jio，说覆盖你儿姿就覆盖你儿姿，o(￣︶￣)o

  5. fixed方式的浮动

  ①. 理解：他和absolute类似，也是通过top等属性进行定位，但他是固定式的，当有滚动条的存在的时候，fixed是永远都不会动的

  ②. 代码测试（absolute）：

  <div class="test">
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
        <p>test test test test test test test test test test test test test test test test test test test test</p>
  </div>
  <div class="bottom">
  </div>
  
  html,body{
    margin: 0;
  }
  .test{
    overflow: auto;
  }
  .bottom{
  //这里偷个懒，将两个代码写成一个代码，只是这里一个是absolte，一个是fixed
    position: absolute/fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 200px;
    background-color: deepskyblue;
  }

  ③. absolute效果图

  

  ④. fixed效果图

  
  ⑤.效果图解释，当我们滚动条进行滚动的时候，fixed会始终在最下方固定，而absolute则是滚动的时候并不是始终在下面

  闲聊

• 这是小袁的第一篇博客，小袁其实也并不知道自己会写多久，目标是每周两篇，努力一边养生一边写博客的小袁最帅，哈哈哈！
• 小袁不敢保证自己的东西有多深刻，但可以肯定这些代码都是一点一点去实践过的，随着自己的提高，相信小袁也会写出更多更好的博客给大家
• 在写这篇博客时候，由于自己对markdown的语法不是很熟，不知道为什么这里的莫名其妙地缩进了两格，不知道为啥font标签的color设置好像没有什么效果（不知道能不能修改），有出现这种情况的同学麻烦留下你的评论，十分感谢
• 我是小袁，我们下周见！