求解，warp这儿外围div不能包住内部有float元素的div,怎么解决这个问题。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了求解，warp这儿外围div不能包住内部有float元素的div,怎么解决这个问题。相关的知识，希望对你有一定的参考价值。

<html>
<head>
<title></title>
<style type="text/css">
body
background-color:#111;
margin:0;
padding:0;

#warp
background-color:#fff;
margin: 0 auto;
padding: 0 21px 30px;
position: relative;
text-align: left;
width: 975px;

#left
float: left;
margin-right: 7px;
width: 182px;

#center
float: left;
margin-right: 8px;
padding: 0;
width: 406px;

#right
float: left;
width: 303px;

#left,#center,#right
height:200px;
border:1px solid #009900;

</style>
</head>
<body>
<div id="warp">
<div>
<div>
<p>这是第一个div</p>
</div>
<div>
<p>这是第二个div</p>
</div>
<div id="left">
这是左边的div
</div>
<div id="center">
这是中间的div
</div>
<div id="right">
这是右边的div
</div>
</div>
</div>
</body>
</html>

参考技术A 如楼上 #wrap加overflow:hidden 可以解决问题

但是不能保住内容得根本原因在于，兄弟标签之间存在浮动，那么必须在最后一个浮动标签之后，清除浮动。

<div style="clear:both"></div>

把上面一句代码放在
<div id="right">
这是右边的div
</div>的后面就行了 参考技术B <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body
background-color:#111;
margin:0;
padding:0;

#warp
background-color:#fff;
margin: 0 auto;
padding: 0 21px 30px;
position: relative;
text-align: left;
width: 975px;

#left
float: left;
margin-right: 7px;
width: 182px;

#center
float: left;
margin-right: 8px;
padding: 0;
width: 406px;

#right
float: left;
width: 303px;

#left,#center,#right
height:200px;
border:1px solid #009900;

</style>
</head>
<body>
<div id="warp">
<div>
<div>
<p>这是第一个div</p>
</div>
<div>
<p>这是第二个div</p>
</div>
<div id="left">
这是左边的div
</div>
<div id="center">
这是中间的div
</div>
<div id="right">
这是右边的div
</div>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>

我加了个clear both 自己在项目中 尽量少用float 因为会给网页布局带来不必要的麻烦 还有 用了以后 记得加上<div style="clear:both;"></div> 清除浮动给下文带来的效果 真正的项目定位一般是以像素绝对定位本回答被提问者采纳 参考技术C 给 #warp 加一个overflow:hidden;属性就OK了 参考技术D 1，首先要保证里面的几个div宽度不要超过外面div宽度。如果超过，按楼上的方法解决。
2，在最外面warp 内部后后加一个 <div style="clear:both"></div>

以上是关于求解，warp这儿外围div不能包住内部有float元素的div,怎么解决这个问题。的主要内容，如果未能解决你的问题，请参考以下文章

多个div嵌套时，内部div的上间距（margin-top）会带动外围div一起，怎样解决这种问题呢？

《Java编程思想》笔记 第十章 内部类

java 嵌套类

用了div+float背景不能显示了，求解

C++ 基础复习 1

html 中给div 设置display:inline-block; 之后不能给 div设置width 和 height，求解释，求帮忙