小小de页面

最新推荐文章于 2022-04-23 15:27:41 发布

原创最新推荐文章于 2022-04-23 15:27:41 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML

本文探讨了网页布局中出现的间距异常增大问题，通过分析发现是由于浮动未被正确清除导致。文中提供了一个具体的HTML示例，展示了如何通过添加clearfix样式来解决此类问题。


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="ie=Edge" />
<title>无标题文档</title>
<style>
*{margin:0; padding:0; border:0px; font-size:12px; color:#000;}
	.wrap{width:950px; margin:0 auto;}
		#nav{ margin:35px 0;}
			#nav ul{ float: right; list-style:none; display:inline;}
				#nav ul li{ float:left; line-height:19px;}
					#nav ul li a{ text-decoration:none; word-spacing:3px;}

		#content{float:left;}  
			#content .col{float:left; margin-left:10px; }
			#content .col.first{margin-left:0px;}
				#content .col .rc{width:230px; height:38px; border-bottom:15px solid #000; height:115px;}
				#content .col .rh{border-top:15px solid #000; height:38px; line-height:38px; font-size:25px; font-weight:bolder;}
	    #foot{margin-top:28px;margin-left:240px; }
			#foot ul{}
				#foot li{ float:left; width:134px; margin-left:26px; }
				#foot li em{ font-weight:bold; font-size:13px;}
				#foot li span{ display:block;}
.clear{ clear:both;}
</style>
</head>
<!--原稿地址：http://72rivingtonstreet.com/-->
<body>
<div class="wrap">
	<div id="nav">
    	<ul>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">NOW ,THEN & NEXT</a></li>
            <li><a href="#">SHOP</a></li>
            <li><a href="#">LIBRARY</a></li>
            <li><a href="#">LOCATION & OPENING TIMES</a></li>
            <li><a href="#">PRESS</a></li>
            <li><a href="#">MAIN YCN WEBSITE</a></li>
        </ul>
        <div class="clear"></div>
    </div>

   	<div id="content">
    	<div class="col first">
        	<div class="rc rh"></div>
            <div class="rc"><a href="#"><img src="logo.gif" width="230" height="115" /></a></div>
            <div class="rc"></div>
            <div class="rc"></div>
        </div>
        <div class="col">
        	<div class="rc rh">NOW</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
        <div class="col">
        	<div class="rc rh">SHOP</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
        <div class="col">
        	<div class="rc rh">LIBRARY</div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
            <div class="rc"><a href="#"><img src="m1.gif" width="230" height="115" /></a></div>
        </div>
    </div>
    <div class="clear"></div>
    <div id="foot">
    	<div>
        	<ul>
            	<li>
                	<em>location & Opening Times</em>
                    <p>
                    	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Now, Then & Next</em>
                    <p>
                     	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Library</em>
                    <p>
                    	<span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
                <li>
                	<em>Shop</em>
                    <p>
                        <span>YCN.72 Rivington Street </span>
                        <span>London, EC2A 3AY </span>
                        <span>  United Kingdom</span>
                        <span>  t. +44 (0) 207 033 2140</span>
                        <span>e. info@ycnonline.com</span>
					</p>
                </li>
            </ul>
        </div>

    </div>
</div>
<script>

</script>
</body>
</html>

[img]http://dl.iteye.com/upload/attachment/193742/055f69b3-591f-3da3-95d1-a20b96c142dc.jpg[/img]
在页面的最后测试中出现问题，就是，margin出现问题，间距增加。一开始认为是由于IE6的bug空白叠加，最后发现时因为浮动没有清除，导致这种情况的出现，