<!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>
想达到的效果：
而实际的效果 ：
5 个解决方案
#1
<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>
</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>
#2
可不可以讲一下原理啊？为什么我在ul或者li标签的样式里加"clear：right";就不行啊
#3
首先去掉ul的float：left
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
就好了
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
ul自适应高度
ul{
zoom:/*IE*/
}
ul:after{
content:' ';
display:block;
clear:both;
height:0;
}
就好了
#4
1. 首先说浮动
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把<ul>浮动了 而又没有给它加宽度，所以它就是所有<li>的宽度。
一般情况下，对于用<ul><li><a>来作导航栏，仅浮动<li>，然后给<ul>加个overflow:hidden 即可
2. 再说说clear
clear:both 的含义就是清除浮动元素对当前元素的影响，
也就是说clear:both 应该加在“当前元素”（一般是非浮动元素）
3. 最后说说布局
一般，布局都是从整体到局部的。
也就是说，你得先布大的框架，再整各个不同的小模块。比如：
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把<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>
#5
感谢大神们的赐教，看来一个小小的浮动属性所要注意的细节都那么深啊！！！不过我好奇的是我所看到的源码是没有对浮动进行处理竟然可以达到效果，这本书大概是在07年出的，当时的浏览器处理会不一样吗???
#1
<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>
</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>
#2
可不可以讲一下原理啊？为什么我在ul或者li标签的样式里加"clear：right";就不行啊
#3
首先去掉ul的float：left
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
就好了
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
ul自适应高度
ul{
zoom:/*IE*/
}
ul:after{
content:' ';
display:block;
clear:both;
height:0;
}
就好了
#4
1. 首先说浮动
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把<ul>浮动了 而又没有给它加宽度，所以它就是所有<li>的宽度。
一般情况下，对于用<ul><li><a>来作导航栏，仅浮动<li>，然后给<ul>加个overflow:hidden 即可
2. 再说说clear
clear:both 的含义就是清除浮动元素对当前元素的影响，
也就是说clear:both 应该加在“当前元素”（一般是非浮动元素）
3. 最后说说布局
一般，布局都是从整体到局部的。
也就是说，你得先布大的框架，再整各个不同的小模块。比如：
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把<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>
#5
感谢大神们的赐教，看来一个小小的浮动属性所要注意的细节都那么深啊！！！不过我好奇的是我所看到的源码是没有对浮动进行处理竟然可以达到效果，这本书大概是在07年出的，当时的浏览器处理会不一样吗???