<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://jackxiang.com/index.php zh-cn http://jackxiang.com/post// <![CDATA[清除浮动代码--bond,及cntv的兄弟的一个清浮动的情况。]]> jack <xdy108@126.com> Thu, 17 Jun 2010 04:39:58 +0000 http://jackxiang.com/post//
.clear-class:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear-class{zoom:1;display:block;}

<ul class="clear-class txt">
      <li class="liclass">
      </li>  
</ul>


<div class="txt">
翻页代码 1，2，3...下一页
</div>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
cntv的页面构建师,在每一个行（一行里如有6个图，图下有文字）加上一个清浮动的Div【<div class="clear"></div>】，这个clear对应清浮动的样式如下：

.clear{clear:both;overflow:hidden;display:block;height:0;font-size:0;}

---------------------------------------------------------------------------------------------------------------------------------------------
float 是 css 的定位属性。在传统的印刷布局中，文本可以按照需要围绕图片。一般把这种方式称为“文本环绕”。在网页设计中，应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图片一样。浮动的元素仍然是网页流的一部分。这与使用绝对 定位的页面元素相比是一个明显的不同。绝对定位的页面元素被从网页流里面移除了，就像印刷布局里面的文本框被设置为无视页面环绕一样。绝对定位的元素不会 影响其它元素，其它元素也不会影响它，无论它是否和其它元素挨着。

印刷布局中的“文本框被设置为无视页面环绕”指的是文本框的内容不会受到页面其他元素的影响，也不会在页面中自动换行。这种设置通常用在一些特殊的排版需求中，比如表格、图表或者注释。

印刷布局里面的文本框被设置为无视页面环绕，这话怎么理解，请解释下它后面的背景知识：
背景知识
页面环绕：在印刷排版中，文本内容会根据页面的边界、图像、表格等元素进行自动换行和调整，以使内容能够适应页面的布局。这种机制被称为“页面环绕”或“文本环绕”。
无视页面环绕：当文本框被设置为无视页面环绕时，它的内容将会保持在一个单独的框内，不会因为页面边界或者其他元素的存在而进行换行或调整。这通常用于需要精确控制内容布局的场景，比如：
表格：表格的每一行和每一列都需要精确对齐，不能因为页面的边界而改变其结构。
图表：图表中的数据和图形需要保持固定的相对位置，避免因为页面布局变化而影响其显示效果。
注释：注释内容有时需要放在特定的位置，以便读者能够轻松找到和理解。


像这样在一个元素上用CSS设置浮动：

#sidebar { float: right; }
fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None (默认的) 使元素不浮动，Inherit 将会从父级元素获取float值。

清除Float
清除(clear)是浮动(float)的相关属性.一个设置了清除Float的元素不会如浮动所设置的一样，向上移动到Float元素的边界，而是会忽视浮动向下移动。如下，一图顶千言。
上例中，侧栏向右浮动，并且短于主内容区域。页脚(footer)于是按浮动所要求的向上跳到了可能的空间。要解决这个问题，可以在页脚(footer)上清除浮动，以使页脚(footer)待在浮动元素的下面。
#footer { clear: both; }
清除(clear)也有4个可能值。最常用的是 both，清楚左右两边的浮动。left 和 right 只能清楚一个方向的浮动。none 是默认值，只在需要移除已指定的清除值时用到。inherit 应该时第五个值，不过很奇怪的是 IE 不支持(这个不奇怪吧，IE 从来都这么特立独行吧 －糖伴西红柿注)。只清除左边或右边的浮动，实际中很少见，不过绝对有他们的用处。


http://www.cnblogs.com/zhujl/archive/2012/05/08/2489440.html
http://paranimage.com/css-float-attribute/
使用浮动(float)的一个比较疑惑的事情是他们怎么影响包含他们的父元素的。如果父元素只包含浮动元素，那么它的高度就会塌缩为零。如果父元素不包含任何的可见背景，这个问题会很难被注意到，但是这是一个很重要的问题
估计Bond的来源摘录（http://paranimage.com/css-float-attribute/）：
简单清除方法使用了一个聪明的 css 伪选择符(:after)来清除浮动。比起在父元素上设置 overflow，只需要给它增加一个额外的类似于”clearfix”的类。这个类使用如下 css:
.clearfix:after {
  content: ".";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
这会在清除浮动的父元素之后应用一点看不见的内容。这不是全部内容，还需要一些额外的代码来适应那些老旧的浏览器。
-------------------------------------------------------------------------------------------------------------

INTRO: 在写页面的过程中经常要遇到清除浮动的情况，这里总结了一下几种常用的清楚浮动的方法。
CATEGORY: 网站前端
TAGS: clear, css
在使用float进行页面布局时，经常遇到有需要清除浮动的地方。通常情况下，只需要在下一个元素上添加clear样式，就可以达到清除浮动的效果了。

clear:left – 清除所有向左的浮动；
clear:right – 清除所有向右的浮动；
clear:both – 清除所有浮动；
clear:none – (默认)不清除浮动。

但是这种方式使得元素样式有一点乱，在以后进行页面修改时，会找不到在哪个元素清了浮动；或者在添加了一些元素以后，原有的冗余样式没有清理。

所以比较简单的办法是设一个clear样式：
.clear{clear:both;}
在需要清除浮动的元素上统一加上clear类，这样以后在修改代码时比较容易看到是哪些元素上使用了清除浮动。

对于一般的情况，这样也就足够了，但是总有一些特殊的时候。

这样一个例子：
<div id="content">
  <div class="box">
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>
<div id="sidebar"></div>
这种情况下，如果在下一个元素上清浮动，就得在id为sidebar的div上加clear了，这样有些脱离了原本清除浮动的语义。是类名为box的div需要清除浮动，而不是id名为content的div需要清浮动。为了还原clear的本意。这里需要在类名为right的div后面加一个无意义元素。

如<p class=”clear”></p>

这么做的缺点也很明显，就是使得页面的html结构中多了一个无意义的元素p。

为了避免这种情况，这里还有两种新的清除浮动的方法。

方法一：利用overflow属性达到清除浮动的效果。

在需要清除浮动的元素，这里的例子中需要清浮动的元素是类名为box的div元素，给这个元素加上以下CSS语句。
.box{
overflow:auto;
zoom:1;
}
方法二：利用:after伪类来清除浮动。

新建一个类，取名为clearboth，在需要清除浮动的元素上使用。修改例子中的html代码：
1
<div class="box clearboth">
.clearboth:after {content: "";display: block;height: 0;clear: both;}
.clearboth { *zoom : 1; } // for IE 6.

我写的测试代码：


++++++++++++++++++以下说得很详细很有操作性+++++++++++++++++++++++++++++
自己对下面这一段做实践Ok的再次体会，为此也贴上：http://blog.csdn.net/cjxtfxs/article/details/6328185
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;

CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

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

比如：

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

如果不用清除浮动，那么第3列文字就会和第1、2列文字在一起 ，所以我们在第3个这列加一个清除浮动 clear:both;
<p style="float:left;width:200px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p style="clear:left;">这个是第3列。</p>
通常，我们往往会将“清除浮动”单独定义一个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;
} ]]> http://jackxiang.com/post//#blogcomment <![CDATA[[评论] 清除浮动代码--bond,及cntv的兄弟的一个清浮动的情况。]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://jackxiang.com/post//#blogcomment