为什么我的实际效果达不到想要的效果啊！主要是li标签的浮动效果影响的，在样式里用了clear属性还是解决不了。

wu201041301213 2015-04-23 04:44:57



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

 <meta http-equiv="content-type" content="text/html ; charset=utf-8"/>

<style>

body{

font-family:"Helvetica","Arial",sans-serif;

color:#333;

background-color:#ccc;

margin:1em 10%;

height:550px;

width:1024px;

}

h1{

color:#333;

background-color:transparent;

}

a{

color:#c60;

background-color:transparent;

font-weight:bold;

text-decoration:none;

}

ul{

float:left;

padding:0;



}

li{

float:left;

padding:1em;

list-style:none;

clear:right;

}

img{

clear:both;

}

</style>

  <title> Image Gallery </title>

 </head>

 

 <body>

  <h1>Snapshots</h1>



  <ul>

		<li>

		<a href="images/1.jpg" onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>

		</li>

		<li>

		<a href="images/2.jpg" onclick="showPic(this); return false;" title=" A cup of black coffee"> Coffee</a>

		</li>

		<li>

		<a href="images/3.jpg" onclick="showPic(this); return false;"  title="A red ,red rose ">Rose</a>

		</li>

		<li>

		<a href="images/4.jpg" onclick="showPic(this); return false;" title=" The famous clock"> Big Ben</a>

		</li>

	</ul>

		<img src="images/5.jpg" alt="my image ga	llery" id="placeholder"></img>

		<p  id="description">Choose an image.</p>

 </body>

</html>

想达到的效果：

而实际的效果：

...全文

185 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

wu201041301213 2015-04-24

打赏
举报

感谢大神们的赐教，看来一个小小的浮动属性所要注意的细节都那么深啊！！！不过我好奇的是我所看到的源码是没有对浮动进行处理竟然可以达到效果，这本书大概是在07年出的，当时的浏览器处理会不一样吗???

forwardNow 2015-04-24

打赏
举报

1. 首先说浮动浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，你把<ul>浮动了而又没有给它加宽度，所以它就是所有<li>的宽度。一般情况下，对于用<ul><li><a>来作导航栏，仅浮动<li>，然后给<ul>加个overflow:hidden 即可 2. 再说说clear clear:both 的含义就是清除浮动元素对当前元素的影响，也就是说clear:both 应该加在“当前元素”（一般是非浮动元素） 3. 最后说说布局一般，布局都是从整体到局部的。也就是说，你得先布大的框架，再整各个不同的小模块。比如：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout</title>
</head>
<body>


    <div class="header">
        <div class="logo"></div>
        <div class="nav"></div>
    </div>

    <div class="main">
        <div class="main-left"></div>
        <div class="main-right"></div>
    </div>

    <div class="footer">
        
    </div>
    
</body>
</html>

逍遥兮容与 2015-04-23

打赏
举报

首先去掉ul的float：left 然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度加上：

ul自适应高度
ul{
     zoom:/*IE*/
}

ul:after{
     content:' ';
     display:block;
     clear:both;
     height:0;
}

就好了

wu201041301213 2015-04-23

打赏
举报

可不可以讲一下原理啊？为什么我在ul或者li标签的样式里加"clear：right";就不行啊

slwsss 2015-04-23

打赏
举报

<a href="images/4.jpg" onclick="showPic(this); return false;" title=" The famous clock"> Big Ben</a> </li> </ul> <div style="clear: both;"> <img src="images/5.jpg" alt="my image ga llery" id="placeholder"/> <p id="description">Choose an image.</p></div> </body> </html>