clear:both 的作用介绍

Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之可以采用通过Hack实现,感兴趣的朋友可以参考下

 

如:

复制代码
代码如下:

<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>

你可以将此部分代码放到一个HTML页面看看效果,然后在去掉”<div style="clear:both;"></div>”看一下效果,就知道这句话的作用了。

如图:

(1)有clear:both的
(2)无clear:both的

这样看,应该就一目了然了:原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之。可以采用通过Hack实现:

复制代码
代码如下:

<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
TEST DIV</div>
</div>

里边的原理:
(1)、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。
:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:
a:after{content:"(link)";}
这个CSS将会让a标签内的文本后边加上link文本文字。
(2)、利用“* html”这个只有IE6认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE6。
(3)、利用“*:first-child + html”这个只有IE7认识的选择符,设置缩放属性“zoom: 1;”实现兼容IE7。

时间: 2024-11-30 23:34:07

clear:both 的作用介绍的相关文章

三星S6 edge指纹识别有什么用?S6指纹作用介绍

S6指纹作用介绍   纹识别功能,该功能可用于屏幕锁定.网站登录.验证三星账户以及移动支付了,其实大概也就这些了,具体的我们可以如下来看看 __指纹锁屏:锁屏后,将手指放在主页键上以验证身份解锁屏幕 __登录网页:登录记录密码的网站时 __验证三星账户  登录三星产品可以直接使用指纹登录了不需要再填写账号与密码了 __在线支付  绑定到我们的设备这样不需要输入支付密码了

html中隐藏域hidden的作用介绍及使用示例

隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用,下面为大家详细介绍下此隐藏域在实际中时如何使用的,感兴趣的朋友不要错过了哈   基本语法: <input type="hidden" name="field_name" value="value"> 作用: 1 隐藏域在页面中对于用户是不可见的,在表单中插入隐藏域的目的在于收集或发送信息,以利于被处理表单的程序所使用.浏览者单击

DIY组装电脑各硬件的基本知识和作用介绍

  下面组装电脑小编本文简单为大家介绍下,DIY电脑都有哪些硬件,这些硬件的作用又是什么,一起来看看吧. CPU:即处理器,计算机的最核心硬件,构成系统的控制中心,对各个部件统一协调和控制,相当于人体的大脑,运算与控制全靠它. 主板:主板影响CPU和显卡的性能发挥和稳定性,也决定电脑接口的可扩展性,主板主要是为CPU.内存.显卡.硬盘等提供平台,相当于人体的躯干,关联着各个器官. 显卡:显卡主要负责显示,任何一台电脑都必须有显卡,否则像无法显示图像,画面等信息.简单来说,显卡决定整机的游戏性能和

Win7麦克风侦听功能的使用及作用介绍

  Win7麦克风侦听是在系统麦克风管理中的一项功能,麦克风侦听是配合麦克风同时使用的一种音频播放功能,很多win7用户不知道此功能的作用是什么故此小编为大家带来了Win7系统下麦克风侦听功能的作用和打开方法,希望对大家有所帮助! Win7麦克风侦听功能的作用 如果用户开启了Win7麦克风侦听功能,我们在通过语音讲话时候,能够在音响或耳麦中听到自己的声音,就例如我们在KTV唱歌时一样,当然如果我们不开启该功能的话,那么我们就无法听到自己所说的话! 二.Win7麦克风侦听功能怎么打开 打开win7

U盘零部件作用介绍

  U盘的结构比较简单,主要是由USB插头.主控芯片.稳压IC(LDO).晶振.闪存(FLASH).PCB板.帖片电阻.电容.发光二极管(LED)等组成.下面来介绍一下它们的各自作用. USB插头:容易出现和电路板虚焊,造成U盘无法被电脑识别,如果是电源脚虚焊,会使U盘插上电脑无任何反映.有时将U盘摇动一下电脑上又可以识别,就可以判断USB插口接触不良.只要将其补焊即可解决问题. 稳压IC:又称LDO,其输入端5V,输出3V,有些劣质U盘的稳压IC很小,容易过热而烧毁.还有USB电源接反也会造成

php中大括号作用介绍_php技巧

一.不管什么程序,function name(){}, for(){}, -.太多了,不说也知道做什么用了. 二.$str{4}在字符串的变量的后面跟上{}刚大括号和中括号一样都是把某个字符串变量当成数组处理. 三.{$val}这时候大括号起的作用就是,告诉PHP,括起来的要当成变量处理. 复制代码 代码如下: $arr=array(0=>123, 'name'=>'你好'); foreach($array as $k=>$v){ echo "select * from blo

TrieTree服务-组件构成及其作用介绍_实用技巧

上一篇中我们对TrieTree服务有了一个整体的了解,不知道大家下载完之后有没有真正玩过这个TrieTree服务,如果你还没有玩过,没关系,本文将一步步教你配置和使用TrieTree服务. TrieTree服务由几大组件组成,如下图 Dictionary组件是核心库,主要提供基本数据定义.配置信息定义,数据结构表示,同时也提供了POSType(参考Pangu的Part of Speech定义).由于TrieTree是利用内存来加载数据的,所以这个组件的设计直接决定了内存的占用大小和数据查询性能.

泽诺尼亚传奇5称号大全 34个称号名称及作用介绍

<泽诺尼亚传奇5>名称作用一好吧,介绍一下泽诺尼亚传奇5称号吧,游戏中一共有34个称号,这里就介绍一下,并讲解一下称号的作用还有获得的方法.称号:Challenger作用:可以增加100的 生命值上限获得方法:人物等级升到5级.称号:Newb Hero作用:可以增加300的生命值上限.获得方法:人物等级提升到10级.称号:Veteran Hero作用:可以增加1000的生命值上限.获得方法:人物等级提升到50级.泽诺尼亚传奇5称号:Super Hero作用:提升10%的生命值上限.获得方法:人

URL中井号的作用介绍_应用技巧

URL中的井号(#)是比较常见的,它并不影响网址的指向,而是有众多功能和特点的.下面就为大家介绍一些有关井号的故事. 1.页面中的某一个位置可以用井号在URL中指定 井号作为比较长出现在URL的一种符号,通常也会代表这个页面中的某一个位置,比如:http://aoshu.juren.com/chzt/xiaoxueshijuan/index.html#nn1,此URL表示在这个页面中nn1的位置.浏览器读取这个URL后,会自动将nn1位置滚动至可视区域. 设置描点只需在相应位置添加,然后在按钮的