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

最新推荐文章于 2023-07-20 11:01:37 发布

iteye_16498

最新推荐文章于 2023-07-20 11:01:37 发布

阅读量652

点赞数

分类专栏： css+div 文章标签： css float的div撑不起来父div

本文链接：https://blog.csdn.net/iteye_16498/article/details/82619152

版权

css+div 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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>

iteye_16498

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css1--关于float的div撑不起父div的问题

div的float让div脱离了文档流，这就造成了一个问题，float的div的高度，宽度不能撑起父div，这个问题的解决办法：第一：设置父div的属性：overflow:hidden;zoom:1;[code="java"]#parent{border:1px solid red;overflow:hidden;zoom:1;}#children,#div3{float:...
复制链接

扫一扫