浮動導緻父元素高度塌陷解決辦法：清除浮動

基于前輩們的經驗，缺點較為突出的幾項方案就不寫了。

以下主要總結常用方案：

方案一：clear清除浮動

在浮動元素後的同級元素直接用clear清除前一進制素的浮動，代碼如下：

/*HTML代碼*/
        <div class="inner">浮動元素</div>
        <div class="test">clear:both;清除浮動</div>
/*CSS代碼*/
        .inner{
            float: left;
        }
        .test{
            clear: both;
        }/*同級子元素不需要浮動，後續第一個子元素需清除浮動*/
           

方案二：僞類清除浮動

一個父級元素内所有子元素都為浮動元素，則在父級元素尾部自動建立一個非浮動塊狀元素，代碼如下：

/*HTML代碼*/
    <div class="container">
        <div class="inner">浮動元素</div>
    </div>
    <div>僞類清除浮動</div>
/*CSS代碼*/
        .inner{
            float: left;
        }
        .container:after{
            content: "";
            display: block;
            clear: both;
            height:;
            width:;
            visibility :hidden;
            /*加上overflow:hidden之後要計算超出的大小來隐藏，是以父容器會自動撐開自己把所有的子元素放進去，同時會計算浮動的子元素。*/
        }
        .container{zoom: ;}
        /*IE 的獨有指令"zoom:1;"，作用是激活父元素的"hasLayout"屬性，讓父元素擁有自己的布局。IE 會讀取這條指令，其他浏覽器則會直接忽略它。*/