float/文档流 - 爱码网

float : left | right | none | inherit;
文档流是文档中可显示对象在排列时所占用的位置。
浮动的定义: 使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。
clear : left | right | both | none | inherit; 元素的某个方向上不能有浮动元素。clear:both;在左右两侧均不允许浮动元素。

清除浮动方法

加高度　　问题:扩展性不好

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .box{
                height:200px;
                border:1px solid red;
            }
            .item{
                width:200px;
                height:200px;
                background-color: black;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="item"></div>
        </div>
    </body>
</html>

View Code