HTML元素的浮動以及清除浮動，對很多人來說都是感覺非常惡心的，是以今天就研究了下。研究透了，也就那樣了。
如果不了解的話，做頁面布局的時候，經常會遇到頁面被撐不起來的現象，是以浮動這個知識點還是蠻重要的。
1.原始元素如下,外層div：container，内層：a左浮動，b右浮動
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
</div>
</body>
效果圖：
分析：a元素左浮動，b元素右浮動，綠色邊框的container元素高度沒有被撐起來，成為一條橫線，因為浮動的元素不被看作正常的文檔流，是以高度相對于文檔流的container來說無效。
2.在b元素下添加c元素,c元素樣式clear:left
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:left;"></div>
</div>
</body>
效果圖：
分析：綠色邊框container元素有了左側a元素的高度，因為clear:left清除了左側a元素的浮動，相當于a元素恢複成文檔流元素，是以其高度對于container有效，撐開了其高度。
3.将c元素樣式改成clear:right
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:right;"></div>
</div>
</body>
效果圖：
分析：c元素的clear:right清除了右側b元素的浮動，b元素就相當于文檔型元素了，是以其高度有效，container被b元素撐開。
4.将c元素改成clear:both
<body>
<div class="container" style="border:1px solid green;">
<div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">這是一個長很長的頁面</div>
<div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">塊元素</div>
<div class="c" style="clear:both;"></div>
</div>
</body>
效果：
分析：因為c元素的clear:both，意思是清除左右浮動，是以a,b元素都成了文檔型元素效果，是以其高度都有效，而b元素高，是以contariner被撐到b的高度。