css关于浮动的例子--float

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Floating example</title>
    <style>
        .container{
            800px;
            border:1px solid #ccc;
            margin:20px;
            overflow: hidden;
        }

        .box{
            100px;
            height:100px;
            border:1px dotted black;
            background-color:yellow;
            margin: 20px;
            position: relative;
        }

        .box span{
            position:absolute;
            bottom:0px;
            right:0px;
        }

        .float-left{
            float:left;
        }

        .float-right{
            float:right;
        }
    </style>
</head>
<body>
<p>Floating examples</p>
<p>Box1 float to the left.</p>
<div class="container">
   <div class="box float-right">
       <span>Box1</span>
   </div>

    <div class="box">
        <span>Box2</span>
    </div>

    <div class="box">
        <span>Box3</span>
    </div>
</div>

<p>Box1 float to left and under the Box2</p>
<div class="container">
    <div class="box float-left">
        <span>Box1</span>
    </div>

    <div class="box">
        <span>Box2</span>
    </div>

    <div class="box">
        <span>Box3</span>
    </div>
</div>

<p>All box float left</p>

<div class="container">
    <div class="box float-left">
        <span>Box1</span>
    </div>

    <div class="box float-left">
        <span>Box2</span>
    </div>

    <div class="box float-left">
        <span>Box3</span>
    </div>

</div>


</body>
</html>

1 第一个例子,div向右浮动

2 第二个例子,div向左浮动,而且Box1浮动之后脱离文档流,不会影响文档流中其他div的位置,最后被隐藏在Box2的下面

3 第三个例子,所有的div向左浮原本并没有什么值得说的,但是在敲代码验证的时候发现一个问题,只有当box的父容器带有overflow:hidden ,box好像就不脱离文档流一样,

占据父容器的地盘,暂时不知道为什么.

第3个总结中的问题知道是怎么回事了.

overflow 属性定义在包含的内容对于指定尺寸太大的情况下元素应该怎么样.在默认情况下,内容会溢出框外,进入相邻的空间.

应用值为auto或者hidden的属性有一个有用的副作用,这会自动清理包含的所有浮动元素.