浮动定位属性float

使用浮动属性float的可用值：
none：默认。文本或图像会显示于它在文档中出现的位置。
left：文本或图像会移至父元素的左侧；
right：文本或图像会移至父元素的右侧。

1、未使用浮动元素float的文档流如下：

 .box{
            margin: auto;
            width: 400px;
            height:400px;
            border: 2px solid black;
        }
        .list1{
            width:100px;
            height: 250px;
            background: red;
        }
        .list2{
            width:100px;
            height:100px;
            background: green;
            border: 1px solid silver;
        }
        .list3{
            width:100px;
            height:100px;
            background :yellow;
        }

效果如下：

2、给list3``使用float取值right，list3将脱离文档流向右浮动直到边框靠着box的边框

 .list3{
            width:100px;
            height:100px;
            background :yellow;
            float:right;
            }

3、给list1使用float取值right，list1脱离文档流向右浮动直到边框靠着box的边框

.list1{
            width:100px;
            height:100px;
            background: red;
            float:right;
        }

4、给list1使用float取值left，list1脱离文档流向左浮动直到边框靠着box的边框，此时由于list1不占位置，因此list2、list3依次上移。

.list1{
            width:100px;
            height:100px;
            background: red;
            float:left;
        }

因为list1不占位置，list2上移后在list1的下面，如图：
5、把三个框都向左移动，list1脱离文档流向左浮动到box的左边框为止，而list2、list3向左浮动到前一个浮动框的边缘为止`

 .list1{
            width:100px;
            height:100px;
            background: red;
            float:left;
        }
        .list2{
            width:100px;
            height:100px;
            background: green;
            float:left;

        }
        .list3{
            width:100px;
            height:100px;
            background :yellow;
            float:left;
        }

效果如图：

6、当box的框太窄，不能同时容纳下向左浮动的三个浮动框，那么多余的浮动框就会下移。

.menu{
            margin: auto;
            width: 250px;
            height:400px;
            border: 2px solid black;
        }
        .list1{
            width:100px;
            height:100px;
            background: red;
            float:left;
        }
        .list2{
            width:100px;
            height:100px;
            background: green;
            float:left;

        }
        .list3{
            width:100px;
            height:100px;
            background :yellow;
            float:left;
        }

效果如图：
list3下移

7、当浮动框高度不同，且box的框太窄，那么原本下移的浮动框会被卡住

.menu{
            margin: auto;
            width: 250px;
            height:400px;
            border: 2px solid black;
        }
        .list1{
            width:100px;
            height:250px;
            background: red;
            float:left;
        }
        .list2{
            width:100px;
            height:100px;
            background: green;
            float:left;

        }
        .list3{
            width:100px;
            height:100px;
            background :yellow;
            float:left;
        }

效果如图：
list3被卡住