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