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

为什么用了浮动,内容就从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

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

    点赞 打赏 评论
  • 月苍 2015-12-24 03:29

    你倒是给个效果图啊,自己对着看好累啊- -

    点赞 打赏 评论
  • 毕小宝 2015-12-24 04:38

    float就是让元素脱离原先的文档流结构啊。

    点赞 打赏 评论
  • ITDragon龙 2015-12-24 05:19

    用法好像没有错,是不是选择器的优先级问题,你把class="clear"换成id="clear"试试

    点赞 打赏 评论
  • 蜗牛爬的太快 2015-12-24 06:17

    首先帮你数了一下div标签,

    7个
    8个,也有可能我眼神不好你自己查一下。其次查一下宽度的设置,很有可能是超宽了。
    给你个建议,HTML语言标签请不要左对齐,相对应的对齐其余的错开这样便于观看层次结构,不然你标签对少写其中一个都不好找错在哪。
    点赞 打赏 评论
  • 子元素长度超过父元素宽度会自动换行,直接发代码啊。。。

    点赞 打赏 评论

相关推荐 更多相似问题