父元素不寫高度時，子元素寫了浮動之後，父元素會發生高度塌陷

示例程式碼:

HTML程式碼:

<div class="box"> 
    <div class="box-l">left浮動</div> 
    <div class="box-r">right浮動</div> 
</div>

.box{
	width:400px; border:1px solid #F00; background:#FF0;
}
.box-l,.box-r{
	width:180px; height:100px; border:1px solid #00F; background:#FFF;
}
.box-l{
	float: left;
}
.box-r{
	float: right;
}
 

效果:

1.方案一

給父級盒子設定高度，缺點 : ( 前提需要能確定內容高度才能設定 )

CSS程式碼:

.box{
	width:400px; border:1px solid #F00; background:#FF0; height:102px
}
.box-l,.box-r{
	width:180px; height:100px; border:1px solid #00F; background:#FFF;
}
.box-l{
	float: left;
}
.box-r{
	float: right;
}

效果:

2.方案二 (clear:both)

在浮動元素下方新增空的塊級元素，並給該元素新增樣式
注意：新增的空標籤和浮動元素是兄弟關係
缺點：破壞文件結構
HTML程式碼:

<div class="box"> 
    <div class="box-l">left浮動</div> 
    <div class="box-r">right浮動</div> 
    <!--新增一個空的塊級元素-->
    <div class="clear"></div> 
</div>

 CSS程式碼:

.box{
	width:400px; border:1px solid #F00; background:#FF0;
}
.box-l,.box-r{
	width:180px; height:100px; border:1px solid #00F; background:#FFF;
}
.box-l{
	float: left;
}
.box-r{
	float: right;
}
.clear{
	clear: both;
}
 

注意：clear:both 元素左右兩邊都不允許出現浮動元素
效果:

缺點: 在結構裡增加了空的標籤，不利於程式碼的可讀性，且降低了瀏覽器的效能

3.方案三 (父級div定義 overflow: hidden;)

實現原理：因為overflow:hidden屬性相當於是讓父級緊貼內容，這樣即可緊貼其物件內內容（包括使用float的div盒子），從而實現了清除浮動。

缺點 : 會隱藏溢位的元素

 CSS

程式碼:

.box{
	width:400px; border:1px solid #F00; background:#FF0; overflow: hidden;
}
.box-l,.box-r{
	width:180px; height:100px; border:1px solid #00F; background:#FFF;
}
.box-l{
	float: left;
}
.box-r{
	float: right;
}

效果:

4.方案四(推薦使用)

萬能清除浮動(推薦)

原理：通過在樣式表中建立統一樣式，然後進行呼叫即可

選擇符:after{
	content:".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
	}

<style>
.clearfix::after{
    content:" ";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
        }
.box {
	width:400px; border:1px solid #F00; background:#FF0;
	}
.box-l,.box-r {
	width:180px; height:100px; border:1px solid #00F; background:#FFF;
	}
.box-l {
	float: left;
	}
.box-r {
	float: right;
	}
 </style>

<div class="box clearfix" > 
        <div class="box-l" >left浮動</div> 
        <div class="box-r">right浮動</div> 
 </div>

效果圖: