CSS——float属性及Clear:both备忘笔记

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性，作用就是改变块元素对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果。Float的功能很强大，但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。

使用Float样式，如果没有清除浮动，那么有浮动元素的父元素容器将无法自动撑开。如果没有清除内部浮动，此时会导致浮动的父元素无法自动撑开到本身应有的高度。也就是说：当一个元素是浮动的，如果没有关闭浮动时，其父元素不会包含这个浮动元素，因为此时浮动元素从文档流中脱离。

所以需要在样式定义的后面进行清除浮动，清除浮动的方法有几种：

Clear:both清除浮动

clear清除浮动主要是借用clear属性来清除浮动，这是一种比较陈旧的清除浮动方法，但是感觉一般遇到这种问题都会用这种方法去清除浮动。使用clear:both来清除浮动，我们需要在需要清除浮动地方的后面紧接着增加一个额外元素，比如说一个div标签，并且定义他们的样式为“clear:both”,其通常使用的结构方式如下：

<div class=”demo A”>
<div class=”demoB demoFloat”>float left</div>
<div class=”demoC demoFloat”>float right</div>
<div class=”demoD demoFloat”>not float</div>
<div class=”clear”></div>
</div>

<pre name=”code” class=”css”> .clear {
clear:both;/*主要使用这个属性来清除浮动*/
/*为了不让ie具有一定的空间，个人建议加上下面三个属性*/
height: 0;
line-height: 0;
font-size: 0;
}</pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>
<h4 style=”margin:0px; line-height:30px; color:rgb(81,177,72); font-family:’Microsoft Yahei'”><a name=”t1″></a>
<span style=”white-space:pre”></span>2.使用overflow</h4>
<p style=”margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:’Microsoft Yahei’; line-height:28px”>
<span style=”white-space:pre”></span>用overflow方法来清除浮动相对来说比较简单，只需要在有浮动的元素上面加上下面的属性：</p>
<p style=”margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:’Microsoft Yahei’; line-height:28px”>
</p><pre name=”code” class=”css”> .A {
overflow: auto;