鍍金池/ 問答/HTML/ 使用float元素引起的margin-top問題

使用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>

clipboard.png

當我給div1也加上margin-top屬性值的時候，div1竟然好像相對于div2進行上外邊距的計算：

<!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>

clipboard.png

回答
編輯回答
菊外人

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

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

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

重疊呢，換一下兩個div的順序，是不是不一樣。或者你找一些文字。看看塊在下面，但是文字擠出來了。去看看

MDN-float

2017年7月23日 11:42
編輯回答
殘淚

出現(xiàn)這種情況是因為div1設(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向下移動，還是因為div2和body頂部重疊的原因，div1實際上是相對body移動的。

2017年3月11日 02:18
編輯回答
小眼睛

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

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

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

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

2018年5月10日 22:01