为什么小弟我的实际效果达不到想要的效果啊主要是li标签的浮动效果影响的，在样式里用了clear属性还是解决不了
为什么我的实际效果达不到想要的效果啊！主要是li标签的浮动效果影响的，在样式里用了clear属性还是解决不了。
想达到的效果：
而实际的效果：
------解决思路----------------------
<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>
------解决思路----------------------
首先去掉ul的float：left
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
就好了
------解决思路----------------------
1. 首先说浮动
浮动元素默认情况下是没有宽度的，得靠内容撑出来宽度或手动给它加个宽度，
你把<ul>浮动了 而又没有给它加宽度，所以它就是所有<li>的宽度。
一般情况下，对于用<ul><li><a>来作导航栏，仅浮动<li>，然后给<ul>加个overflow:hidden 即可
2. 再说说clear
clear:both 的含义就是清除浮动元素对当前元素的影响，
也就是说clear:both 应该加在“当前元素”（一般是非浮动元素）
3. 最后说说布局
一般，布局都是从整体到局部的。
也就是说，你得先布大的框架，再整各个不同的小模块。比如：
<!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>
想达到的效果：
而实际的效果：
------解决思路----------------------
<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>
------解决思路----------------------
首先去掉ul的float：left
然后li元素是浮动元素，而浮动元素是不在文档流中，所以这个ul是没有高度
加上：
ul自适应高度
ul{
zoom:/*IE*/
}
ul:after{
content:' ';
display:block;
clear:both;
height:0;
}
就好了
------解决思路----------------------
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>