float & clear

1.1、float属性

float被称为浮动。让使用他的元素脱离文档流！

float的取值有left、right、none、inherit4个。

left表示从左到右依次显示

right表示从右到左依次显示

1.2、clear属性

浮动导致元素脱离了文档流，这带来了问题，所以，有时候，希望清除掉带来的影响，需要使用该属性。

清除浮动的做法通常是在使用了float属性的那个元素的同级元素的后面的元素上使用clear : both进行清除。

我们可以使用:after伪元素选择器，来实现。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .left {
            background-color : red;
            display : inline-block;
            float   : left;
        }
        .right {
            background-color : blue;
            display : inline-block;
            float   : right;
        }
        .clear-float {
            background-color : green;
        }
        .clear-float:after {
            content : '';
            display : block;
            clear   : both;
        }
    </style>
</head>
<body>
    <div class='clear-float'>
        <div class='left'>left</div>
        <div class='right'>right</div>
    </div>
    <p>我不受影响</p>
</body>
</html>

content:''不可省略，否则达不到效果。