html 浮动元素

　　在CSS布局中分为内联元素(display:inline)和块状元素(display:block)，块状元素默认会占据一行，可设置高度宽度以及边距，而内联元素不会也不能设置。常见的内联元素有：a、span、input、select，常见的块状元素有：h1-h6，p,div，ul，table。
　　浮动元素是设置float为非none值的元素，这时该元素会自动被设置成块元素，可以设置宽度、高度以及边距。浮动元素，顾名思义，使该元素浮动在其他元素之上，离开了原来的文档流，直到浮动到父元素的左右边距（上下边距不受限制）或者左、右方遇到其他设置了float的元素。而其附近设置的浮动元素会跟其边距相邻，表面上跟内联元素似的。而非浮动元素则相对复杂一些，分以下两种情况：浮动元素后边的元素若是非浮动行内元素且因为定位产生重叠时，行内元素边框、背景和内容都在该浮动元素“之上”显示，浮动元素后边的元素若是非浮动块级元素且在定位后产生重叠时，该块级元素边框和背景在该浮动元素“之下”显示，只有内容在浮动元素不在非浮动元素的部分显示。

　　关于clear:both属性
     这个属性只能用于设置块状元素，而对内联元素无效果。
     设置这个属性的效果如下：
     clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.
     clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.
     clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.
     上面提到的行也可能是多行组成的一个块,不仅仅是一个文本行的概念.
     由于浮动元素是浮动在其父元素之上的，只有左右边距受到父元素影响，因此，当一个块只有浮动子元素时，其上下高度可能为0（因为此时没有子元素能够撑起父元素），这时可以设置一个空的块元素，设置其clear：both属性即可。如下面的例子所示：

<div style="border:2px solid red">
    <div style="float:left;width;80px;height;80px;border:1px solid blue;">TEXT DIV</div>
    <div style="clear:both"></div>
</div>

此时设置了第二个子元素的clear属性为both，因此此时其效果如下：

如果不设置clear属性，则由于第二个子元素的内容为空，因此父元素无法撑起，显示效果将是一条线，而由于第一个子元素是浮动的，因此其显示在父元素之外。如下所示：