css Clear:both 清除float浮动

CSS的float属性，作用就是改变块元素对象的默认显示方式：

HTML标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果，所以需要在样式定义的后面进行清除浮动

 

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。

CSS的float属性，作用就是改变块元素对象的默认显示方式，HTML标签设置了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>

 

===============================================================

 

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除。

 

程序代码:

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是第3列。</p>

如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起 ，所以我们在第3个这列加一个清除浮动 clear:both;

截图如下：

 

 

 

==========================================================
通常，我们往往会将“清除浮动”单独定义一个CSS样式，如:

程序代码

.clear {
     clear: both;
}

然后使用<div class="clear"></div>来专门进行“清除浮动”。
不过也有不赞同意见是，<div class="clear"></div>可以不写，直接在下层清除就可以了。
比如本来好好的

程序代码

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:both;">这个是第3列。</p>

 

程序代码

<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<div class="clear"></div>
<p>这个是第3列。</p>

这点看来，<div class="clear"></div>确实不需要写。
不过很显然，我们在网页设计时还有一种很普遍的情况：

程序代码

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600;     float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
</div>
<p style="clear:both;">第三段内容</p>

该页面测试在IE下效果正合所要：第一行有红色和黄色两个色块内容，第二行是第三段文本。

不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

程序代码

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600;     float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>

对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：

程序代码

clear {
     clear: both;
     height:1px;
     margin-top:-1px;
     overflow:hidden;
}

 

程序代码

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600;     float: left;width: 130px;}
#container {float: right;width: 420px;background-color: #FFFF33;}
.clear {clear: both;height:1px;margin-top:-1px;overflow:hidden;}
</style>
<div id="main">
<div id="sidebar">第一段内容 第一段内容 第一段内容</div>
<div id="container">第二段内容 第二段内容 第二段内容</div>
<div class="clear"></div>
</div>
<p>第三段内容</p>