CSS3权威指南-浮动

基础html，两个浮动元素

<div class="content">
        <div class="red"></div>
        <div class="blue"></div>
    </div>

1、浮动元素不会超出父元素的外边界。所以说是相对于父元素浮动的。

因为浮动了，所以父元素高度坍塌！高度始终是0，所以高度不用管。但是父元素外边界还是存在的

<style>
        .content{
            margin-top: 100px;
            margin-left: 150px;
            width: 700px;
            background-color: #eee;
        }

        .red{
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .blue{
            float: left;
            width: 300px;
            height: 300px;
            background-color: blue;
            display: none;
        }
    </style>

父元素在这，没有高度，所以宽度也无法显示了

可以设置一下高度看看具体的位置

浮动已经脱离文档流，所以说父元素多高，对子元素，没有影响。

2、浮动元素的左边/右边，必须是浮动元素。

就是说浮动元素会紧靠上一个浮动元素，不会覆盖！

宽度够的情况下，是横向排列

都是左边

一左一右

如果宽度不够，就会往下挤

<style>
        .content{
            margin-top: 100px;
            margin-left: 150px;
            width: 500px;
            height: 10px;
            background-color: #eee;
        }

        .red{
            float: left;
            width: 300px;
            height: 300px;
            background-color: red;
        }

        .blue{
            float: right;
            width: 300px;
            height: 300px;
            background-color: blue;
        }
    </style>

浮动永远是安全的，可见的，不会覆盖！

3、浮动元素的顶端，不能比之前的浮动元素高。

就是说ABCD三个元素吧。

    <style>

        *{
            padding: 0;
            margin: 0;
        }

        /*如果content不设置宽高，就继承了body的宽*/
        .content{
            margin-top: 10px;
            margin-left: 15px;
            width: 1000px;
            height: 10px;
            background-color: #eee;
        }

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

        .blue{
            float: left;
            width: 500px;
            height: 300px;
            background-color: blue;
        }

        .green{
            float: right;
            width: 100px;
            height: 500px;
            background-color: green;
        }

        .yellow{
            float: right;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="red">A</div>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <p>pppppppppppppppppppp</p>
        <div class="blue">B</div>
        <div class="green">C</div>
        <div class="yellow">D</div>
    </div>
</body>

A的位置很简单没问题。

浮动的顶部，会被其他块级元素顶下来

可以看到文字是环绕浮动元素开始的，并且没有任何padding和margin，内容也没有缺失

B元素的顶部被顶下去，CD由于不能比之前的浮动元素高，所以是和B一样高的，不能浮动到更上面去。

D向右浮动，因为父元素宽度还够，就紧挨着C，没有问题。

如果C+D+B宽度大于父元素了，D将会被挤下去。因为D是在后面声明的。

挤下去之后，继续向右浮动，因为右浮动的边界是另一个浮动，就是C，所以还会紧挨C