为什么里面有文字就会把div给顶下来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>测试</title>
<style>
#left{
width: 300px;
height: 300px;
background-color: green;
float: left;
position: relative;
}
#right-fix{
width: 100%;
height: 300px;
background-color: hotpink;
float: left;
margin-left: -300px;
}
#right{
height: 300px;
background-color: yellow;
margin-left: 300px;
}
</style>
</head>
<body>
<div id="left"></div>
<div id="right-fix">
<div id="right">
<div id="inner">
<h1>2243</h1>
<p>dfdaaf</p>
</div>
</div>
</div>
</body>
</html>
个回答
-
- 969999666696
- 2020-07-23 20:58:43
【个人理解，有错请指正！】
参考博客：
（1）https://www.cnblogs.com/anvivi/p/9708987.html
（2）https://blog.csdn.net/qq_36470686/article/details/82864510
原因：
（1）这个问题是因为浏览器为了在页面中没有样式时也可以有一个比较好的显示效果，给很多元素都设置了一些默认的margin。图中的h1和p去浏览器调试一下可以发现，它们都被浏览器设置了margin。
（2）CSS有规定：相邻的两个或更多盒元素的margin将会合并为一个margin共享之。盒元素应该指的是能设置margin、border、padding的元素，本代码中的盒元素是div、h1和p；相邻指的是同级或者嵌套的盒元素，并且它们之间没有非空内容、padding或border分隔，本代码中p与h1、h1与#inner、#inner与#right符合这种情况，#right-fix因为设置了浮动所以不参与margin的折叠。
解决方法：
（1）将浏览器自带的margin设置去掉。
* { margin: 0; }（2）因为浮动或绝对定位不参与margin的折叠，所以可以对父元素#inner设置浮动或者绝对定位。
注意：由于本代码中#inner元素没有设置宽高，所以#inner的宽高取决于其内容。
（3）对父元素#inner设置overflow: hidden;即可。