為什么里面有文字就會(huì)把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>測(cè)試</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>
2020-07-23
【個(gè)人理解，有錯(cuò)請(qǐng)指正！】
參考博客：
（1）https://www.cnblogs.com/anvivi/p/9708987.html
（2）https://blog.csdn.net/qq_36470686/article/details/82864510
原因：
（1）這個(gè)問題是因?yàn)闉g覽器為了在頁面中沒有樣式時(shí)也可以有一個(gè)比較好的顯示效果，給很多元素都設(shè)置了一些默認(rèn)的margin。圖中的h1和p去瀏覽器調(diào)試一下可以發(fā)現(xiàn)，它們都被瀏覽器設(shè)置了margin。
（2）CSS有規(guī)定：相鄰的兩個(gè)或更多盒元素的margin將會(huì)合并為一個(gè)margin共享之。盒元素應(yīng)該指的是能設(shè)置margin、border、padding的元素，本代碼中的盒元素是div、h1和p；相鄰指的是同級(jí)或者嵌套的盒元素，并且它們之間沒有非空內(nèi)容、padding或border分隔，本代碼中p與h1、h1與#inner、#inner與#right符合這種情況，#right-fix因?yàn)樵O(shè)置了浮動(dòng)所以不參與margin的折疊。
解決方法：
（1）將瀏覽器自帶的margin設(shè)置去掉。
*?{ ????margin:?0; }（2）因?yàn)楦?dòng)或絕對(duì)定位不參與margin的折疊，所以可以對(duì)父元素#inner設(shè)置浮動(dòng)或者絕對(duì)定位。
注意：由于本代碼中#inner元素沒有設(shè)置寬高，所以#inner的寬高取決于其內(nèi)容。
（3）對(duì)父元素#inner設(shè)置overflow: hidden;即可。