在設計網頁樣式時我們所最需要的就是清除浮動，這樣頁面才可以按照我們所想去實現一些樣式。標準文件流是做不出網頁的。下面小編具體介紹一些清除浮動方法。

首先我們要明確，浮動的清除不是指的是把浮動去掉而是關住浮動，使得浮動與浮動之間相互不影響。

1.給盒子加高（不適用）

浮動在一個有高度的盒子中就不會影響後面的浮動元素，給祖先元素加高是一種方法。

2.clear:both;(該方法會使margin失效)

在祖先盒子加入clear:both;屬性

我們這樣理解這種方法clear:both;就是使得該盒子消除了兩邊浮動的影響。但這樣的話該盒子就會margin屬性失效。所以同樣不適用。

3.隔牆法（該方法運用浮動元素盒子同樣沒高）

運用例項：就是在兩個浮動元素中加上一個盒子將該盒子加上clear:both;屬性

同樣在此時我們如果需要之前兩個盒子間有間隙的話直接給我們所新增的工具盒子附上高，這樣通俗來講就是在兩個浮動盒子中加了一個工具盒子來支撐他們兩個，同時消除浮動影響。

這邊例項簡介一下

1<div class="box1">
2		<ul>
3			<li>HTML</li>
4			<li>CSS</li>
5			<li>JS</li>
6			<li>HTML5</li>
7			<li>設計模式</li>
8		</ul>
9	</div>
10	
11	<div class="cl h16"></div>
12
13	<div class="box2">
14		<ul>
15			<li>學習方法</li>
16			<li>英語水平</li>
17			<li>面試技巧</li>
18		</ul>
	</div>


css中
1.cl{
2	clear: both;
3}
4.h16{
5	height: 16px;
}
 

4.內牆法（可以給浮動元素盒子新增上高而且高是由盒子內內容支撐不需要自己定義）

操作同外牆法一樣但只是把所要加入的盒子加浮動元素盒子中，這種方法更加靈活，因為這樣會使父盒子高度自己按內容定義。

5.overflow:hidden;

在父盒子中加入該屬性，就會清除浮動影響，同樣也會根據內容自定義高度。

3.4.5方法margin都生效

這邊小編最後補充一點，如果沒有浮動那麼本身父盒子會被內容所填充高度，但是浮動後元素脫離了標準文件流不能對父親盒子進行填充。