在很多前端工程師日常工作中，在使用到float佈局時，總會有一點需要去考慮的，那就是清除浮動問題。

那這個問題怎麼會發生的呢？

當float子元素高度超出父級元素高度時，父級元素高度塌縮，因為float元素脫離文件流，其佈局不受父元素控制

這個情況如下圖所示

程式碼如下： 

<style>
	.wrap {
		padding: 30px;
		background: #CECECE;
		color: #FFFFFF;
		text-align: center;
		line-height: 100px;
	}
	
	.left {
		float: left;
		background: #00A8FE;
		width: 300px;
		height: 200px;
		padding: 10px;
		text-align: center;
		line-height: 200px;
		color: #FFFFFF;
		opacity: 0.3;
	}
	
	.right {
		float: right;
		background: #9ACD32;
		width: 300px;
		height: 200px;
		padding: 10px;
		text-align: center;
		line-height: 200px;
		color: #FFFFFF;
		opacity: 0.3;
	}
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>
 

那這個問題怎麼解決呢？

1. clear：both

在父級元素內部加個div，設定clear: both即可，清除兩邊的浮動。

<style>
       ...
	.clear {
		clear: both;
	}
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="clear"></div>
</article>
 

2. overflow：hidden

<style>
    ...

	.wrap {
		overflow: hidden; // auto也可以，但是切記visible不行
	}
    ...
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>

3. :after偽元素

<style>
    ...

	.wrap:after {
		clear: both; // auto也可以，但是切記visible不行
	}
    ...
</style>
<article class="wrap">
	wrap
	<div class="left">left</div>
	<div class="right">right</div>
</article>
 

這裡有個偽元素的知識點：

:before和:after是分別在當前元素內部的前後插入兩個元素塊。

這裡再wrap類後價格:after偽元素，其實和解決方案一一樣，在內部的最後加一個元素，裡面使用clear:both從而達到清除浮動的效果。

清除浮動後效果：