爪哇岛卖咖啡 2015-12-24 03:18 采纳率: 65.8%
浏览 2805

为什么用了浮动,内容就从div里溢出来了?

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>北斗之芯</title>
<link href="index.css" rel="stylesheet" type="text/css"/>
</head>
<body>


<div id="header">
<div id="header_left"><h1>北斗之芯</h1></div>
<div id="header_center"><p><img src="images/beidouzhixin.png"  width="140" height="100" alt="北斗之芯协会图标" title="北斗之芯"/></p></div>
<div id="header_right">
<div id="search_box">
<form id="search_form" method="post" action="#">
<input type="text" id="s" value="搜索" class="swap_value" width="159" height="24"/>
<input type="image" src="images/btn_search_box.gif" width="27" height="24" id="go" alt="Search" title="Search"/>
</form>
</div>
</div>
</div>

<div class="clear"></div>


<div id="daohang">
<ul><a href="#">首页</a></ul>
<ul><a href="#">学习天地</a></ul>
<ul><a href="#">经典教材</a></ul>
<ul><a href="#">留言板</a></ul>
<ul><a href="#">联系我们</a></ul>
<ul><a href="#">关于我们</a></ul>
</div>
</div>

<div id="tupian">
<p><img src="images/tupian01.png" width="100%" alt=“今天做别人不想做的事情,明天做别人不能做的事情" title="今天做别人不想做的事情,明天做别人不能做的事情"></p>
</div>
<div class="clear"></div>



<div id="fenzu">

<div id="ruanjianzu">
<div class="tupian"><img src="images/ruanjianzu.jpg" alt="软件组图片" title="软件组" width="75" height="100" /></div>
<div class="wenzi"><p><h3>软件组</h3>主要从事手机软件开发,主要学习java、Android、PHP</p></div>
</div>

<div id="jiaoshizu">
<div class="tupian"><img src="images/jiaoshi.png" title="一流的师资" alt="一流的师资" width="75" height="100"></div>
<div class="wenzi"><p><h3>优质师资</h3>井冈山大学信息工程系主任刘清老师<br/>理事长:刘庆梁&nbsp;&nbsp;副理事长:童嘉欣</p></div>
</div>

<div id="yingjianzu">
<div class="tupian"><img src="images/yingjianzu.png" title="硬件组" alt="硬件组图片" width='75' height="100"/> </div>
<div class="wenzi"><p><h3>硬件组</h3>主要从事硬件开发,拥有美国进口机器人、3D打印机等一系列先进高科技设备</p></div>
</div>

</div>

<div class="clear"></div>
<div id="jiaoxue">


<div id="kechengshezhi">
<ul>
<li><span style:font-size:24px;>课程设置</span></li>
<li>JAVA</li>
<li>Android</li>
<li>PHP</li>
<li>单片机</li>
<li>3D打印</li>
<li>智能机器人</li>
</ul>
</div>

<div id="jianjie">
<h3 style="color:red;text-align:center;vertical-align:middle;">北斗之芯协会</h3>
<p>

  井冈山大学北斗之芯协会,成立于2013年,学术科技类社团,隶属于井冈山大学学生社团联合会,北斗之芯协会担负着为北斗之芯实验室输送人才的任务,北斗依托电子与信息工程学院,由信息工程系主任刘清担任指导老师,社团由理事会组织管理。设有理事长、副理事长及相关部门。
</p>
</div>

<div id="jingdianjiaocai">
<ul>
<li><span style:font-size:24px;>经典教材</span></li>
<li>《java入门到精通》</li>
<li>《Android核心科技》</li>
<li>《细说PHP》</li>
<li>《51单片机教程》</li>
<li>《3D打印入门到精通》</li>
<li>《疯狂机器人》</li>
</ul>

</div>

</div>







</body>>
</html>

以上是html文件






body {background-image:url(images/blue.gif);}
#search_box{width:201px;height:31px;background:url(bg_search_box.gif);float:right}
#search_box #s{
float:left;
padding:0px;
margin:6px 0px 0px 6px;
border:0px;
width: 159px;
background:none;
font-size:14px;
}
#search_box #go{float:right;margin:6px 4px 0 0;}
#header{width:100%; border:hidden; margin-top:0px; margin-right:auto;background-color:none;height:80px;position:fixed z-index:10000;}
#header_left{ width:40%;float:left;margin-top:20px;}
#header_left h1{font-size:40px;color:#FFFFFF;text-align:left;vertical-align:middle;}
#header_center{width:30%;float:left}
#header_center p{text-align:left;vertical-align:middle;}
#header_right{width:30%;float:right;margin-top:20px;}
.clear{
clear:both;
margin:0px;
padding:0px;
}
#daohang{
background-color:#0033FF;
border:1px,#000,solid;
float:left;
width:100%;
}                     
#daohang ul{ float:left;list-style-type:none;border:1px solid #FFF;width:100px;font-size:21px;text-decoration:none;text-align:center;
margin:2px auto;color:#FFFFFF;display:block;}
#daohang ul a{
color:#FFFFFF;
text-decoration:none;

}
 a:hover{color:#66FF99;}
#fenzu{background-color:#FFFFFF;margin:auto aauto;padding:10;}
#ruanjianzu{
background-color:#FFFFFF;
float:left;
width:32%;height:115px;
text-align:center;vertical-align:middle;
margin::auto 0px;
}
#jiaoshizu{
background-color:#FFFFFF;
float:left;
width:33%;height:115px;
text-align:center;vertical-align:middle;
margin::auto 0px;
}
#yingjianzu{
background-color:#FFFFFF;
float:left;
width:35%;height:115px;
text-align:center;vertical-align:middle;
margin::auto 0px;
}
.tupian{float:left; margin:auto 0; padding:10px;height:100px;}
.wenzi{float:left;text-align:center;vertical-align:middle;height:100px;}

#jiaoxue{background-image:url(images/baizhuan.gif);width:100%;height:150px; z-index:10000}
#kechengshezhi{float:left;width:27%;}
#jianjie{float:left;width:46%;}
#jingdianjiaocai{float:left;width:27%;}
li{display:block;border-top:border:1px solid #FFF;}
  • 写回答

6条回答 默认 最新

  • yishuixs 2015-12-24 03:25
    关注

    废话,用了浮动就不在普通文档流里了,怎么会不溢出?

    评论

报告相同问题?

悬赏问题

  • ¥20 iqoo11 如何下载安装工程模式
  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?