使用float元素引起的margin-top問題

如下代碼所示，我給div2加上margin-top屬性，div1怎么也跟著有了margin-top屬性呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute + margin auto</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
        #div1 {
            background-color: red;
            float: left;
        }
        #div2 {
            margin-top: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

當(dāng)我給div1也加上margin-top屬性值的時(shí)候，div1竟然好像相對于div2進(jìn)行上外邊距的計(jì)算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>absolute + margin auto</title>
    <style type="text/css">
        div {
            width: 100px;
            height: 100px;
        }
        #div1 {
            background-color: red;
            float: left;
            margin-top: 10px;
        }
        #div2 {
            margin-top: 30px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

回答

編輯回答

菊外人

他們說的已經(jīng)很好了，我也沒有什么可以說的了。那就說說怎么查這個(gè)東西吧。

先說margin,原理呢就是上邊說的合并了。你可以打開控制臺，然后選擇元素自己看看body的位置。當(dāng)然了，我比較壞設(shè)置一下body{border: 1px solid #f00}你會發(fā)現(xiàn)他們就合并不了了，當(dāng)然不讓合并還有其他的方法。

給#div2一個(gè)overflow:hidden;你會發(fā)現(xiàn)float被擠走了。原理查查BFC

重疊呢，換一下兩個(gè)div的順序，是不是不一樣?；蛘吣阏乙恍┪淖?。看看塊在下面，但是文字?jǐn)D出來了。去看看

MDN-float

2017年7月23日 11:42

編輯回答

殘淚

出現(xiàn)這種情況是因?yàn)閐iv1設(shè)置浮動float的原因造成的，
你要是想div1受div2影響，清除div2的浮動就可以。

#div2 {
            margin-top: 30px;
            background-color: green;
            clear: both;
        }

2017年8月17日 07:44

編輯回答

吢涼

根本原因是div2和body發(fā)生了上邊距的父子折疊，導(dǎo)致兩者的頂部是重疊的。

div1會向上浮動到body的頂部，看起來就是div1和dvi2的頂部重疊了。

至于給div1加了上邊距之后，它看起來好像是相對div2向下移動，還是因?yàn)?code>div2和body頂部重疊的原因，div1實(shí)際上是相對body移動的。

2017年3月11日 02:18

編輯回答

小眼睛

這是由于盒模型垂直外邊距折疊引起的。

折疊規(guī)則：
相鄰的外邊距都是正數(shù)時(shí)，折疊結(jié)果是兩者間較大的值。
相鄰的外邊距都是負(fù)數(shù)時(shí)，折疊結(jié)果是兩者絕對值的較大值。
兩個(gè)外邊距一正一負(fù)時(shí)，折疊結(jié)果是兩者的和。

這里是body的頂邊距(margin-top)跟div2的頂邊距折疊了，所以整個(gè)body都下來了，此時(shí)body的margin-top取值30px。而div1浮動脫離了文檔流，所以跟div2重疊了，然而因?yàn)閐iv1是body的子節(jié)點(diǎn)，所以也被body帶下來了。

更詳細(xì)的邊距折疊問題和浮動的一些問題，可以看這里：一行文字左浮動，一行不浮動，二者不對齊？

2018年5月10日 22:01