浮动布局与清除浮动

一.浮动布局

浮动布局就是让网页上的标签“浮起来”，比如<div>是不可能两个同占一行，但是让它们浮起来后，就能使它们同占一行。

浮动通过float来设定，左浮：float:left;    右浮：float:left; 

    #div1{
        width: 200px;
        height: 200px;
        border: 2px solid red ;
    }
    #div2{
        width: 200px;
        height: 200px;
        border: 2px solid blue ;

    <div id="div1"></div>
    <div id="div2"></div>

不设定浮动时，页面显示是这个样子的

现在我们加上float

    #div1{
        width: 200px;
        height: 200px;
        border: 2px solid red ;
        float: left;
    }
    #div2{
        width: 200px;
        height: 200px;
        border: 2px solid blue ;
        float: left;

结果两个方框就出现在了同一行

如果我们只改动一个标签的float，我们就会发现未改动的会被遮盖，就像一个在水底，一个在水面。

二.清除浮动

如果我想把一个方框同时放在两个方框下，应该怎么做呢？首先想到的就是两个方框设定float，一个不设定

 #div1{
        width: 200px;
        height: 200px;
        background-color:  red ;    /*为了显示结果更清晰，我把边框颜色改成了背景颜色*/
        float: left;
    }
    #div2{
        width: 200px;
        height: 150px;
        background-color: blue;
        float: left;
    }
    #div3{
        width: 300px;
        height: 300px;
        background-color: green ;
    }

然而。。。

这就是之前提到的一个在水底一个在水面的情况，那怎么才能将绿框移到蓝框和红框下方呢？

我们可以通过设定clear来解决这个问题。

clear:left;    不允许该标签上方有向左的标签

clear:right;    不允许该标签上方有向右的标签

clear:both;    不允许该标签上方有标签

于是我们对#div3加入clear

    #div3{
        width: 300px;
        height: 300px;
        background-color: green ;
        clear: left;        /*也可以用both*/
    }

结果是这样的