您的位置：首页 > 编程技术 > html  >  css 的clear:both的用法

css 的clear:both的用法

 更新时间：2016年9月20日 19:02  点击：1342

加clear空div

.clearfix:after {
content: "."; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after { height: 1px;}

使用方法：

在所有浮动层之后加上这个层

<div class="clearfix"></div>

2.把背景层加浮动，但是这个方法会影响其他的div，有时候好用。

3.加 overlow 这个也有问题，会影响div的外观。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>图片垂直居中</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="all">
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
</style>
</head>
<body>
<div id="content">
<div id="middle">
<div id="inner">垂直居中<br />
<img src="http://www.111cn/images/logo.gif" _fcksavedurl="http://www.111cn/images/logo.gif" alt="网页教学网logo" title="网页教学网logo" /></div>
</div>
</div>
</body>
</html>

文本超过div 自动换行代码文本自动换行IE中解决方法：

word-wrap:break-word;
word-break:break-all;
注：在要换行的内容相应的单元格或者DIV里加入，如：

<div style=word-wrap:break-word;></div>或<td style=word-wrap:break-word;></td>
文本自动换行FireFox中解决方法（脚本）：

<script type="text/javascript">
function toBreakWord(intLen, id){
var obj=document.getElementById(id);
var strContent=obj.innerHTML;
var strTemp="";
while(strContent.length>intLen){
strTemp+=strContent.substr(0,intLen)+"<br>";
strContent=strContent.substr(intLen,strContent.length);
}
strTemp+= strContent;
obj.innerHTML=strTemp;
}
</script>
注：以上脚本放在</head>前面.

调用时如下写法：

同个页面单处调用：

<div id="content">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content");</script>
同个页面多处调用：

<div id="content">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content");</script>
<div id="content2">这里是要应用换行的内容</div><script language="javascript">toBreakWord(60, "content2");</script>
注：把应用的JS写在</div>后面，其中60表示一行要显示多少字字符，注意多个调用时ID的相应变化，不能同一个ID名称，应用上面的方法后IE也会是按设定的字符数换行，但是IE里面支持自动换行，所以只要判断一下是否为IE，如果不是IE就不要输出上面的

<script language="javascript">toBreakWord(60, "content");</script>
这段JS，如果不是就要输出。

//编码HTML  和  解码Html。
//在评论的时候为了防止用户提交带有恶意的脚本，可以先过滤HTML标签，过滤掉双引号，单引号，符号&，符号<，符号
用法：
<input type="text" name="rain" id="rain" />
<input type="button" value="test" onclick=" document.getElementById('rain2').value= document.getElementById('rain').value.htmlEncode()  "/>
<input type="text" name="rain2" id="rain2" />
<input type="button" value="test" onclick=" document.getElementById('rain').value= document.getElementById('rain2').value.htmlDecode()  "/>
**************/

        String.prototype.htmlEncode=function(){
    return this.replace(/&/g,"&").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/\"/g,"&#34;").replace(/\'/g,"&#39;");
}
        String.prototype.htmlDecode=function(){
    return this.replace(/\&amp\;/g, '\&').replace(/\&gt\;/g, '\>').replace(/\&lt\;/g, '\<').replace(/\&quot\;/g, '\'').replace(/\&\#39\;/g, '\'');
}

网页制作常用代码

showModalDialog(sURL [, vArguments] [, sFeatures])
//打开一个模式对话框
//vArguments=需要向新开模式对话框传递的参数
//sFeatures=(*dialogHeight:sHeight;dialogLeft:sXPos;dialogTop:sYPos;dialogWidth:sWidth;center:{ yes | no | 1 | 0 | on | off };dialogHide:{ yes | no | 1 | 0 | on | off };edge:{ sunken | raised };help:{ yes | no | 1 | 0 | on | off };resizable:{ yes | no | 1 | 0 | on | off };scroll:{ yes | no | 1 | 0 | on | off };status:{ yes | no | 1 | 0 | on | off };unadorned:{ yes | no | 1 | 0 | on | off };*)

showModelessDialog(sURL [, vArguments] [, sFeatures])
//打开一个非模式对话框
//vArgument=需要向新开模式对话框传递的参数
//sFeatures=(*dialogHeight:sHeight;dialogLeft:sXPos;dialogTop:sYPos;dialogWidth:sWidth;center:{ yes | no | 1 | 0 | on | off };dialogHide:{ yes | no | 1 | 0 | on | off };edge:{ sunken | raised };help:{ yes | no | 1 | 0 | on | off };resizable:{ yes | no | 1 | 0 | on | off };scroll:{ yes | no | 1 | 0 | on | off };status:{ yes | no | 1 | 0 | on | off };unadorned:{ yes | no | 1 | 0 | on | off };*)
********************************************
execCommand的完全参考(中文版)
document.execCommand(sCommand[,交互方式, 动态参数])

2D-Position;document.execCommand("2D-Position","false","true");使绝对定位的对象可直接拖动;ie5.5
AbsolutePosition;document.execCommand("AbsolutePosition","false","true");使对象定位变成绝对定位;ie5.5
BackColor;document.execCommand("BackColor","false",sColor);设置背景颜色;ie4.0
BlockDirLTR;none;使块级元素排版方式为从左到右?;不支持
BlockDirRTL;none;使块级元素排版方式为从右到左?;不支持 Bold;document.execCommand("Bold","false",null);使选中区域的文字加粗;ie4.0
BrowseMode;none;设置浏览器模式?;不支持 Copy;
document.execCommand("Copy","false",null);复制选中的文字到剪贴板;ie4.0 CreateBookmark;document.execCommand("CreateBookmark","false",sAnchorName);设置指定锚点为书签;ie4.0
CreateLink;document.execCommand("CreateLink","false",sLinkURL);将选中文本变成超连接,若第二个参数为true,会出现参数设置对话框;ie4.0
Cut;document.execCommand("Cut","false",null);剪贴选中的文字到剪贴板;ie4.0
Delete;document.execCommand("Delete","false",null);删除选中的文字;ie4.0
DirLTR;none;排版方式为从左到右?;不支持 DirRTL;none;排版方式为从右到左?;不支持
EditMode;none;设置编辑模式?;不支持
FontName;document.execCommand("FontName","false",sFontName);改变选中区域的字体;ie4.0
FontSize;document.execCommand("FontSize","false",sSize|iSize);改变选中区域的字体大小;ie4.0
ForeColor;document.execCommand("ForeColor","false",sColor);设置前景颜色;ie4.0
FormatBlock;document.execCommand("FormatBlock","false",sTagName);设置当前块的标签名;ie4.0
********************************************
如何把页面加入用户的收藏夹？
<a href="javascript:window.external.AddFavorite('http://','网页教学网脚本')">收藏网页教学网脚本</a>
********************************************
如何让浏览器在保存页面时保存失败？
<NOSCRIPT>
<IFRAME SRC="*.html">
</IFRAME>
</NOSCRIPT>
********************************************
一个页面内所有复选框的全选功能如何实现？
<input type=checkbox><input type=checkbox>
<input type=checkbox><input type=checkbox>
<button onclick=SelectAll()>SelectAll</button>
<script>
function SelectAll()
{
var cInput=document.all.tags('INPUT');
for(var i in cInput)
if(cInput[i].type=='checkbox')cInput[i].checked=true;
}
</script>
********************************************
如何在不刷新页面的情况下刷新css?
<style>
button{ color:#000000;}
</style>
<button onclick=document.styleSheets[0].rules[0].style.color='red'>点击按钮直接修改style标签里button选择符使按钮改为红色</button>

[!--infotagslink--]

相关文章

  • Windows VPN服务器配置图文教程 超详细版

    VPN可以虚拟出一个专用网络，让远处的计算机和你相当于处在同一个局域网中，而中间的数据也可以实现加密传输，用处很大，特别是在一些大公司，分公司处在不同的区域。...2016-01-27

  • 解决执行maven命令时提示Process terminated的问题

    这篇文章主要介绍了解决执行maven命令时提示Process terminated的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25

  • PS滤镜里为什么没有素描？PS CS6素描滤镜在哪？

    我们在作图的时候需要用到“素描”滤镜，但是点开滤镜选项就是找不到。该怎么快速找到“素描”滤镜呢？请往下看。 1、点开滤镜选项时，发现没有素描这一项。2、别急，我...2017-01-22

  • php 中file_get_contents超时问题的解决方法

    file_get_contents超时我知道最多的原因就是你机器访问远程机器过慢，导致php脚本超时了，但也有其它很多原因，下面我来总结file_get_contents超时问题的解决方法总结。...2016-11-25

  • Cloudflare国内自选IP节点整理收录

    一般来说为了达到隐藏自身 IP，我们都会选择一些 CDN 服务，目前用的最多的免费 CDN 是 Cloudflare。但是正常情况下 Cloudflare 是不能自己选择IP，有时候分配给我们的 IP 可能表现不佳，也只能将就着用。但是我们都希望可以用上 CF 比较快的 IP。那么自选IP，就显得很必要了。...2022-09-23

  • Mybatis Plus select 实现只查询部分字段

    这篇文章主要介绍了Mybatis Plus select 实现只查询部分字段的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-09-01

  • MySQL性能监控软件Nagios的安装及配置教程

    这篇文章主要介绍了MySQL性能监控软件Nagios的安装及配置教程,这里以CentOS操作系统为环境进行演示,需要的朋友可以参考下...2015-12-14

  • php file_get_contents 设置代理抓取页面示例

    file_get_contents函数在php中可以直接打开本地文件也可以直接抓取远程服务器文件，如果简单的采集我们可以使用file_get_contents直接来操作，如果有防采集我们可能需要...2016-11-25

  • 解决Mybatis 大数据量的批量insert问题

    这篇文章主要介绍了解决Mybatis 大数据量的批量insert问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-01-09

  • mybatis-plus 表名添加前缀的实现方法

    这篇文章主要介绍了mybatis-plus 表名添加前缀的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-08-26

  • JavaScript判断浏览器及其版本信息

    本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值，下面跟着小编一起来看下吧...2017-01-23

  • iOS APP h5快捷程序 .mobileconfig的生成

    1.从APP Store 下载Apple Configurator 2从一个管理点管理所有iOS设备应用程序，文档和配置文件。想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档，管理日益增...2021-12-23

  • Redis连接池配置及初始化实现

    这篇文章主要介绍了Redis连接池配置及初始化实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-03-29

  • 详解如何清理redis集群的所有数据

    这篇文章主要介绍了详解如何清理redis集群的所有数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2021-02-18

  • mybatis-plus 返回部分字段的解决方式

    这篇文章主要介绍了mybatis-plus 返回部分字段的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02

  • C#中using的三种用法

    using 指令有两个用途： 允许在命名空间中使用类型，以便您不必限定在该命名空间中使用的类型。 为命名空间创建别名。 using 关键字还用来创建 using 语句 定义一个范围，将在此...2020-06-25

  • mybatis的Configuration详解

    这篇文章主要介绍了mybatis的Configuration详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-11-04

  • js实现浏览器打印功能的示例代码

    这篇文章主要介绍了js如何实现浏览器打印功能，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下...2020-07-15

  • pandas pd.read_csv()函数中parse_dates()参数的用法说明

    这篇文章主要介绍了pandas pd.read_csv()函数中parse_dates()参数的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2021-03-05

  • php中去除文字内容中所有html代码

    PHP去除html、css样式、js格式的方法很多，但发现，它们基本都有一个弊端：空格往往清除不了 经过不断的研究，最终找到了一个理想的去除html包括空格css样式、js 的PHP函数。...2013-08-02