css1--关于float的div撑不起父div的问题

Supanccy2013

浏览: 213939 次
性别:
来自: 深圳

最近访客更多访客>>

loginboot

sp42

dyfxfxw520

weitd

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css+div

css float的div撑不起来父div

div的float让div脱离了文档流，这就造成了一个问题，float的div的高度，宽度不能撑起父div，这个问题的解决办法：

第一：设置父div的属性：overflow:hidden;zoom:1;

#parent{border:1px solid red;overflow:hidden;zoom:1;}
#children,#div3{float:right;border:1px solid blue;}

第二：父元素也是设置浮动效果

#parent{border:1px solid red;float:left;}
#children,#div3{float:right;border:1px solid blue;}

第三：在添加一个子元素，并设置clear样式：

<div id="div1">
<div id="div2">two</div>
<div id="div3">one</div>
<div style="clear:both"></div>
</div>

使用第一种方法的实例

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<style type="text/css">
   .mydiv{
      float:left;
      width:130px;
      height:160px;
      background:red;
      margin-left:40px;
      margin-top:15px;
      margin-bottom:15px;
   }
   
   .myspan{
      margin-left:20px;
   }
</style>
</head>
<body>
      <div style="width:90%;margin:0px auto;">
        <div>匹配情况</div>
        <div style="margin-top:5px;">
             <span style="margin-left:15px;">巡维中心:</span>
             <span style="margin-left:5px;">
	             <span class="myspan" style="margin-left:0px;">深圳</span>
	             <span class="myspan">龙华</span>
	             <span class="myspan">深圳</span>
	             <span class="myspan">龙华</span>
	             <span class="myspan">深圳</span>
	             <span class="myspan">龙华</span>
             </span>
             <span style="float:right">切换按钮</span>
        </div>
        <div style="border:1px solid black;overflow:hidden;zoom:1;margin:0 auto;">
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
			  <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
              <div class="mydiv"></div><div class="mydiv"></div><div class="mydiv"></div>
			  <div class="mydiv" style="clear:both">56565</div> 
        </div>
      </div>
</body>
</html>