清除浮动代码--bond,及cntv的兄弟的一个清浮动的情况。

jackxiang 2010-6-17 12:39 | |
腾讯bond兄弟的建议:
.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;
}

作者:jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美,在于尽态极妍 | 应用之美,在于药到病除
地址:https://jackxiang.com/post/3208/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明!


最后编辑: jackxiang 编辑于2024-7-26 10:30
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]