`
dafa1892
  • 浏览: 28893 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

发点用得着的 我个人常用 Div{class="clear"}

 
阅读更多
标签: 常用css 清楚浮动 浮动clear clear:both
清除浮动(闭合浮动元素)的方法总结
很多人都有研究闭合浮动元素的问题,但是解决方法却不一样,也并不是每一种方法都尽善尽美。闭合浮动元素(或者叫清除浮动)是web标准设
计中经常会遇到的一个问题,因此,这里我想总结一下目前经常用到的几种方法,并比较一下他们的易用性和适用环境。如果你有更好的方法不妨
提出来大家一起讨论。
问题的提出:
    最简单的一种情形就是我们把一个小的、固定宽度的div元素(比如导航、引用等)和其他元素内容一起包含在一个大的div中。比如下面这段
代码:
view plaincopy to clipboardprint?
<div id="outer">        <div id="inner"> <h2>A Column</h2> </div>        <h1>Main Content</h1>        <p>Lorem ipsum</p>    
</div>   <div id="outer">     <div id="inner"> <h2>A Column</h2> </div>     <h1>Main Content</h1>     <p>Lorem ipsum</p> 
</div>
我们可以为“#inner”设定一个宽度值(比如说20%),但是由于div是块级元素,即使我们设定了宽度,其后面的内容也只能在下一行中显示,除
非我们给它设定一个浮动属性(无论是向左浮动或者向右浮动)。那么此时会产生我们上面提到的问题了。
如果“#inner”的宽度和高度都比“#outer”小,这不会有问题。
但是,如果“#inner”的高度超过了“#outer”,那么的底部就会超出“#outer”的底部。这是因为我们为“#inner”设定了float属性后,它就
会脱离的文本流,无论其宽度和高度怎么变化都不会使“#outer”跟随变化。
例一:未清除浮动时的布局表现
在这个例子中,最开始由于“#inner”的高度小于“#outer”所以不会有问题,但是当你点击“加长”后你会发现“#inner”的底边已经超出了“
#outer”的范围,而“#outer”没有发生改变。这就是我们所提到的“清除浮动(闭合浮动元素)”或者是“闭合浮动”问题
解决办法:
1)额外标签法
第一个,也是W3C推荐的方法就是使用额外标签的办法。这种方法就是在内容的末尾增加一个空的标签,典型的做法就是使用类似
view plaincopy to clipboardprint?
<br style="clear:both;" />   <br style="clear:both;" />
或者使用
<div style="clear:both;"></div>
这种办法通过增加一个HTML元素迫使外部容器撑开。不过这个办法会增加额外的标签使HTML结构看起来不够简洁。
例二:使用空div闭合浮动元素
P.S. 我发现在Internet Explorer中(无论是6还是7)<br style="clear:both" />可以清除浮动,但是不能闭合浮动元素,在Firefox中就没有这
个问题,不知道是什么原因?!
2)使用after伪类
使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用
它来清除浮动(闭合浮动元素),并隐藏这个内容:
view plaincopy to clipboardprint?
#outer:after{       content:".";       height:0;       visibility:hidden;       display:block;       clear:both;    
#outer:after{    content:".";    height:0;    visibility:hidden;    display:block;    clear:both;
但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用,所以我们
还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中,最常用就是Holly招数。Holly招数的原理是这样的,CSS代码
view plaincopy to clipboardprint?
   CSS 规则      CSS 规则
上面的代码中有两行注释,其中第一行结束时出现了反斜杠(\),在Mac的Internet Explorer中会认为注释并没有结束,于是继续向下直到第一
个完事的“*/”出现,这中间的所有字符都被当作是注释,而IE/Win却也只会把第一行和第三行看作是注释,中间的为有效代码。所以这样就区分
出来了不同平台上的IE了。
正是基于以上原理,在windows的IE 6上的清理浮动,可以使用如下代码:
view plaincopy to clipboardprint?
#outer {       display:inline-block;   }      * html #outer {       height:1%;   }   #outer {     
display:block;   }         #outer {    display:inline-block;}* html #outer {  
height:1%;}#outer {    display:block;}
例三:使用:after伪类清理浮动
P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1%;}即可。
另外,似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。
如果你对如何使用CSS 2中的伪类不熟悉的话,推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors(1)、(2)、(3)”
3)浮动外部元素,float-in-float
这种方法很简单,就是把“#outer”元素也进行浮动(向左或者向右)。
例子
但是这种方法带来的别外一个问题就是和“#outer”相邻的下一个元素会受到“#outer”的影响位置会产生变化,所以使用这种方法一定要小心。
有选择把页面中的所有元素都浮动起来,最后使用一个适当的有意义的元素(比如页脚)进行清理浮动,这有助于减少不必要的标记,但是过多的
浮动会增加布局的难度。
例四:float-in-float
4)设置overflow为hidden或者auto
把“#outer”的属性overflow值设置为hidden或者auto同样可以清理浮动
这种方法不需要添加额外的标记。但是使用overflow的时候一定要小心,因为它会浏览器的表现。另外,在Internet Explorer 6中单纯地设置
overflow为hidden或者auto并不能有效清除浮动(闭合浮动元素),还要指定“#outer”的一个维度,即要么给它指定一个宽度,要么指定一个高
度:
#outer {
    overflow:auto;
    width:100%;
}
注意:如果你要在IE5/Mac上使用这种方法清除浮动(闭合浮动元素)的话,你就必须设定overflow的属性为值为hidden。
例五:overflow:hidden
比较与选择
    四种方法中使用哪种最好呢?首先,不推荐使用after伪类,对比其它三种方法,holly招数有点太烦琐,不好掌握,我上面讲到的holly招数
中并不仅仅是IE/Win上有问题,当出现:hover时还会有其它问题,所以我们又加上了inline-block等属性,也就是说这种方法存在更多的不确定性
。推荐对代码有“洁癖”并且技术较高的人使用。
    那么其它三种方法其实都可以考虑。

不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面;
  而对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用<br />元素还是空<div></div>可以根据自己的喜好来选(当然你
也可以使用其它块级元素)。不过要注意的是,<br />本身是有表现的,它会多出一个换行出来,所以要设定它的heigh为0,以隐藏它的表现。所
以大多数情况下使用空<div>比较合适。
  float-in-float,也是一个很好的选择,把你要进行清理浮动的元素外层再加上一层<div>并设置属性fload:left即可,不过要注意相邻元素的
变化。
分享到:
评论

相关推荐

    前端学习clear清除

    &lt;div class="c" style="clear: left;"&gt;&lt;/div&gt; &lt;/div&gt; ``` 在该示例中,`div.c`由于设置了`clear:left`,所以它会在`div.a`下方开始显示,从而避开了与`div.a`的重叠。 #### 3. 使用`clear:right`清除右侧浮动 ...

    万年历的代码

    &lt;div class='clear'&gt;&lt;/div&gt; &lt;div id='popY' class='popYJ'&gt; &lt;div id='popYword' class='popWord'&gt;宜&lt;/div&gt; &lt;div id='popYStr' class='popStr'&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id='popJ' class='popYJ'&gt; &lt;div id='...

    jQuery的日历签到插件每日签到页面代码.zip

    &lt;div class="qiandao-left-top clear"&gt; &lt;div class="current-date"&gt;2016年1月6日&lt;/div&gt; &lt;div class="qiandao-history qiandao-tran qiandao-radius" id="js-qiandao-history"&gt;我的签到&lt;/div&gt; &lt;/div&gt; &lt;div class=...

    jQuery兼容手机端的响应式倾斜图片幻灯片插件.zip

    &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="captions"&gt; &lt;div class="focalPoint"&gt;&lt;p&gt;&lt;small&gt;Lake&lt;/small&gt;&lt;/p&gt;&lt;/div&gt; &lt;div&gt;&lt;p&gt;&lt;small&gt;Mountain Range&lt;/small&gt;&lt;/p&gt;&lt;/div&gt; &lt;div&gt;&lt;p&gt;&lt;small&gt;Mt. Fuji&lt;/small&gt;&lt;/p&gt;&lt;/div...

    CSS+DIV常用方法说明

    ### CSS+DIV常用方法说明:理解布局与标签的精髓 #### 概述 在现代网页设计中,CSS(层叠样式表)与HTML中的`&lt;div&gt;`元素是构建页面布局和样式的基石。通过合理利用CSS与`&lt;div&gt;`,可以实现响应式设计、灵活的网格...

    一个简单的网页设计

    &lt;div class="clear"&gt;&lt;/div&gt; &lt;div class="twoline"&gt;(昵称将在CSDN全站显示,&lt;font color="red"&gt;90天内只能修改一次。2~20个字符,支持中文、英文、数字、"_"、"-")&lt;/div&gt; &lt;td class="right" ...

    DIV+CSS+HTML布局(三行两列布局)

    &lt;div class="column left"&gt;&lt;/div&gt; &lt;div class="column right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="column left"&gt;&lt;/div&gt; &lt;div class="column right"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class=...

    div和css布局代码

    根据提供的标题、描述以及部分代码内容,我们可以总结出与“div和css布局代码”相关的几个重要知识点: ### 1. CSS基本属性理解 在提供的代码片段中,我们首先可以看到一些常用的CSS属性及其用法。 #### `margin`...

    新手学习DIV+CSS难点之经验总结.pdf

    &lt;div class="clear"&gt;&lt;/div&gt; &lt;/div&gt; ``` 五、三列结构中的DIV写法 三列结构中的DIV写法适用于左右栏是窄幅,中栏为主要内容显示,让其宽度自适应。CSS代码为: ``` #main { width: 760px; margin: 0 auto; } ....

    常用DIV+CSS网页制作布局技术技巧

    ### 常用DIV+CSS网页制作布局技术技巧 #### CSS布局方法详解 **一、Float布局** ...以上就是关于使用DIV+CSS进行网页布局的一些常见技巧和技术点,希望能够帮助到大家更好地理解和应用这些布局方法。

    jQuery-仿微信支付输入密码代码.zip

     &lt;div class="qsrzfmm_bt clear_wl"&gt;      &lt;span class="fl"&gt;请输入支付密码&lt;/span&gt;&lt;/div&gt;  &lt;div class="zfmmxx_shop"&gt;  &lt;div class="mz"&gt;测试商品&lt;/div&gt;  &lt;div class="zhifu_price"&gt;¥88.88&lt;/div&gt;&lt;/...

    DIV滑动门代码

    &lt;div class="TabContent"&gt; &lt;div id="myTab0_Content0"&gt; 欢迎访问:&lt;a href="http://www.alixixi.com" target="_blank"&gt;阿里西西WEB开发 &lt;/a&gt;&lt;/div&gt; &lt;div id="myTab0_Content1" class="none"&gt;&lt;a href=...

    jQuery图片裁剪插件Jcrop.js.zip

     &lt;div class="jy-up-ch"&gt; &lt;a &gt; &lt;/a&gt; &lt;a &gt; &lt;/a&gt; &lt;a &gt; &lt;/a&gt; &lt;a &gt; &lt;/a&gt; &lt;/div&gt;  &lt;/div&gt;  &lt;div class="wr" id="preview-pane"&gt;  &lt;div class="preview-container"&gt;  &lt;div class="pre-1"&gt; &lt;img /&gt; &lt;/div&gt;  ...

    当当网模板非常好用详细

    &lt;DIV class=clear&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;/DIV&gt;&lt;!--页尾 开始 --&gt; &lt;STYLE type=text/css&gt;.public_footer_box { CLEAR: both; MARGIN: 0px auto; FONT: 12px "宋体",Arial,Helvetica,sans-serif; WIDTH: 100% } .public...

    HTML5 SVG柴火燃烧火焰动画特效.zip

    代码片段: ;" id="onlySkuValCloneModel"&gt; &lt;input type="checkbox" class="model_sku_val" propvalid='' value="" /&gt;...&lt;div class="clear"&gt;&lt;/div&gt; &lt;div id="skuTable"&gt;&lt;/div&gt; [removed][removed]

    ionic 实现商品分类

    &lt;div class="button icon-left ion-navicon button-clear" ng-click="toggleCategory()"&gt;&lt;/div&gt; &lt;!--&lt;div class="button icon-left ion-navicon button-clear" ng-click="modal.show()"&gt;&lt;/div&gt;--&gt; &lt;/div&gt; ...

    三种简洁的经典高效的DIV+CSS制作的Tab导航简析

    在网页设计中,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的CSS样式来控制HTML中的`&lt;div&gt;`元素,实现灵活多样的页面布局和交互效果。本篇文章将重点解析三种简洁经典且高效的`DIV+CSS`制作的Tab导航的实现...

    DIV+CSS常用的网页布局代码

    ### DIV+CSS常用的网页布局代码知识点解析 #### 一、基础知识概述 在现代网页开发中,**DIV+CSS**是一种非常流行的布局方式。通过合理的利用HTML中的`&lt;div&gt;`元素结合CSS样式表来实现页面布局,可以使得网页更加...

    Div的静态页面实例

    在实际开发中,`div`经常与其他HTML元素和CSS属性结合使用,例如`class`和`id`来选择和操作特定的`div`,`float`和`clear`来控制元素的浮动,以及`position`(如`relative`、`absolute`和`fixed`)来实现定位。`div`...

Global site tag (gtag.js) - Google Analytics