浮动布局【CSS】

1. 什么是浮动

浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。
浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。

1.1 特征

1.1.1 脱离文档流

脱离文档，也就是说浮动不会影响普通元素的布局。即其他div不会被设置浮动的div浮动位置影响，但是文字仍会为被浮动div让位。因为设置浮动的div只脱离了文档流并未脱离文本流。
从上图可以看出，默认三个设置了宽高的block元素，本来会格子独占一行；如果框1设置了向左/向右浮动，他会忽略框2和框3，直到碰到父元素；同时也存在盖住普通元素的风险。
如图所示，其他div在定位时会忽略被浮动div，而文字不会忽略。

1.1.2 可以内联排列

浮动会向左/向右浮动，直到碰到另一个浮动元素为止，这是浮动可以内联排列的特征。也就是说，浮动可以设置宽高，并且能够一行多个，是介于block和inline之间的存在。

1.1.3 会导致父元素高度坍塌

浮动会脱离文档流，这个问题对整个页面布局有很大的影响。

子元素设置浮动，若父元素内部若无其他未设置浮动的元素，切父元素未设置高度，则会出现父元素高度坍塌问题。

我们可通过clear浮动来解决。

1.1.4 案例

<div class="topDiv">
  <div class="floatDiv">float left</div>
  <div class="textDiv">Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.
  </div>
</div>
<div class="bottomDiv">Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.
</div>

    .topDiv {
   
        width: 500px;
        border: 2px solid black;
    }
    
    .floatDiv {
   
        width: 100px;
        height: 100px;
        border: 2px dotted red;
        color: red;
        margin: 4px;
        float: left;
    }
    
    .bott