网站建设|独享带宽服务器|优惠促销机型|付款方式|联系我们

快速业务通道

欢迎光临凌众科技，我们将竭诚为您提供最优质的服务！业务电话：0592-5908028 技术支持电话：0592-5908020

技术文章 > 网页制作 > CSS > 正文

文件 -1 text win2 服务域名

清除浮动clear:both的应用详解

作者佚名技术来源 CSS技术浏览发布时间 2012-03-05

class="clear"></div>确实不需要写。

不过很显然，我们在网页设计时还有一种很普遍的情况：

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

该页面测试在IE下效果正合所要：蓝色块内部有红色和黄色两个色块内容，同时在蓝色块以下是第三段文本。

不过FF的效果可不是这样的。我们不能单单想在下一层清除就能完成我们的工作，我们必须在浮动元素所在标签闭合之前及时进行“清除”。

[Ctrl+A 全部选择进行拷贝提示：可先修改部分代码，再点击运行]

对于因多加的<div class="clear"></div>标签会引起IE和FF高度变化，通过如下方法解决：

.clear {
    clear: both;
    height:1px;
    margin-top:-1px;
    overflow:hidden;
}

<style type="text/css">
#main {background-color: #3399CC;width: 600px;padding: 20px;}
#sidebar {background-color: #FF6600;    float: left;width: 130</td>
								</tr>
                                <tr>
								<td><p>凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：<a href="http://www.lingzhong.cn">http://www.lingzhong.cn</a>
为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!</p>
</td>
								</tr>
							</table>
						</div>
						<div class="page"><a href="13885.htm">上一页</a><a href="13885.htm">1</a><a href="13885-2.htm" class="current">2</a><a href="13885-3.htm">3</a><a href="13885-3.htm">下一页</a><div style="clear:both;"></div></div>
                        <div id="jiathis">
                          
    <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">
        <a style="background:none;">分享到：</a>
        <a class="bds_qzone"></a>
        <a class="bds_tsina"></a>
        <a class="bds_tqq"></a>
        <a class="bds_renren"></a>
        <a class="bds_baidu"></a>
        <a class="bds_douban"></a>
        <a class="bds_kaixin001"></a>
        <a class="bds_t163"></a>
        <a class="bds_tsohu"></a>
        <span class="bds_more">更多</span>
		<a class="shareCount"></a>
    </div>
<script type="text/javascript" id="bdshare_js" data="type=tools&uid=460515" ></script>
<script type="text/javascript" id="bdshell_js"></script>
<script type="text/javascript">
	document.getElementById("bdshell_js").src = "http://bdimg.share.baidu.com/static/js/shell_v2.js?t=" + new Date().getHours();
</script>

                          <div style="clear:both;"></div>
                        </div>
                        <div id="likeart">
                          <div class="liketitle">你可能对下面的文章感兴趣</div>
                          <div class="likebox">
							<ul>
                          
                          <li><a href="http://www.lingzhong.cn/tech/22138.htm" title="内核笔记之“Process Scheduling”" target="_blank">内核笔记之“Process Scheduling”</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/28215.htm" title="安装linux遇到的问题" target="_blank">安装linux遇到的问题</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/23891.htm" title="linux下面文件和文件夹权限的得来" target="_blank">linux下面文件和文件夹权限的得来</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/11210.htm" title="网站策划概念:中国式网站策划" target="_blank">网站策划概念:中国式网站策划</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/34770.htm" title="Photoshop实例教程:制作剪裁遮色片" target="_blank">Photoshop实例教程:制作剪裁遮色片</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/38607.htm" title="Photoshop渲染滤镜制作彩色冰裂纹" target="_blank">Photoshop渲染滤镜制作彩色冰裂纹</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/29112.htm" title="lvm及磁盘配额" target="_blank">lvm及磁盘配额</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/13802.htm" title="CSS教程：简化CSS中属性的示例" target="_blank">CSS教程：简化CSS中属性的示例</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/29785.htm" title="常用数字处理小技巧" target="_blank">常用数字处理小技巧</a></li>
                          
                          <li><a href="http://www.lingzhong.cn/tech/15828.htm" title="困扰JSP的一些问题与解决方法" target="_blank">困扰JSP的一些问题与解决方法</a></li>
                          
                          </ul>
                          </div>
                        <div style="clear:both;"></div>
                        </div>
						<div class="prenext"><span class="pre">上一篇: <a href='http://www.lingzhong.cn/tech/13886.htm'>Web标准:关于web标准的一些初学的知识</a></span><span class="next">下一篇: <a href='http://www.lingzhong.cn/tech/13884.htm'>CSS编写中灵活运行注释的意义</a></span>
							<div style="clear:both;"></div>
						</div>
						
						<div class="comment">
							<div class="more"> <a href="http://www.lingzhong.cn/tech/plus/comment/?id=13885">关于清除浮动clear:both的应用详解的所有评论</a> </div>
							
							<div class="list">
								<script language="JavaScript" type="text/javascript" src="http://www.lingzhong.cn/tech/plus/comment/js.asp?id=13885"></script>
							</div>
							
							<div class="post">
								<form action="http://www.lingzhong.cn/tech/plus/comment/save.asp" method="post">
									<input type="hidden" name="id" value="13885">
									<label for="user">昵称</label>
									<input name="user" type="text" class="input" />
									<label for="content">评论内容</label>
									<textarea name="content" cols="70" rows="6" class="textarea" onfocus="if($('sn').innerHTML.length==0){geturl('http://www.lingzhong.cn/tech/plus/comment/getcode.asp?'+Math.random(),'sn');}">

随机推荐

相关文章

关于我们|联系我们|合作伙伴|工作机会|付款方式|网站地图

Copyright ©1999-2011 厦门凌众科技有限公司厦门优通互联科技开发有限公司 All rights reserved

地址(ADD)：厦门软件园二期望海路63号701E（东南融通旁）邮编(ZIP)：361008

电话：0592-5908028 传真：0592-5908039 咨询信箱：web@lingzhong.cn 咨询OICQ：173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024 ICP备案:闽ICP备05037997号