css1--关于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>

你可能感兴趣的:(css)