float模型属性

left:向左浮动
right:向右浮动

float模型需要注意的几点

块级元素和行内元素（行内元素不可指定宽高）都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素，即使设置display:inline以后其依然是个块元素
当一个元素浮动以后，其下方的元素会上移。元素中的内容将会围绕在元素的周围。
元素浮动以后即完全脱离文档流，不再在文档中在占用位置。也不会再影响父元素的高度，也就是浮动元素不会撑开父元素。这是由于浮动流所产生的，下面我们来讨论如何解决浮动流问题。

清除浮动流的方法

清除浮动流的方法很多。推荐文章

但是在实际开发中一般都会写一个.clearfix的css选择器,然后使用:after伪元素来清除浮动流，父级元素使用clearfix这个选择器。看下面的代码和演示。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            /* 利用父级元素伪元素来清除浮动流，可以解决父级元素未设置高float影响四周和塌陷问题 */
            .clearfix::after{
                content: " ";
                height: 0px;
                visibility: hidden;
                display: block;
                clear: both;
            }
            /* 上面就是利用伪元素清除浮动流的代码 */
            .wrapper{
                width: 400px;
                border: 1px solid black;

            }
            .content1{
                height: 100px;
                width: 100px;
                background-color: red;
                float: left;
            }
            .content2{
                height: 100px;
                width: 100px;
                background-color: green;
                float: left;
            }
            .content3{
                height: 100px;
                width: 100px;
                background-color: blue;
                float: left;
            }

        </style>
    </head>
    <body>
        <div class="wrapper clearfix">
            <div class="content1"></div>
            <div class="content2"></div>
            <div class="content3"></div>
        </div>

    </body>
</html>