css总结8（浮动）

前言

浮动会使元素向左或向右移动，其周围的元素也会重新排列；
浮动的实现通过float:left/right，浮动的删除通过clear:both/left/right；

浮动会脱离正常文本流，也会影响其父盒子尺寸正确计算；

浮动的使用场景 

(1) 文字和图片做左右环形围绕布局
(2) 首字下沉效果
(3) 网页布局
(3) 媒体响应式浮动页面布局

浮动网页布局

## 用浮动实现左右布局
<style>
  .container {
    width: 90%;
    margin: auto;
  }
  .left {
    float: left;
    width: 25%;
    background-color: aqua;
  }
  .right {
    float: left;
    width: 75%;
    background-color: green;
  }
  .container:after {
    content: "";
    display: block;
    clear: both;
  }
</style>

<div class="container">
    <div class="left">Left Content</div>
    <div class="right">Right Content</div>    
    <div style="clear: both"></div>
</div>


## :after说明
浮动会脱离正常文本流，从而影响父容器尺寸的正确计算，所以我们用:after填充了一个空盒子传递了父容器的尺寸同时清除了浮动(当然自己也可以直接在html中容器的末尾添加一个div并清除浮动)