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的高度。