為什么這個nav會掉下來呢？

我給#main加的margin-top啊為什么#nav會掉下來？
圖片描述

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    *{margin:0 ;padding:0}
    html, body {
        position: relative;
        height: 100%;
    }
    html{-webkit-text-size-adjust:none;}
    #nav{width: 100%;height: 50px;background-color: blue;position: fixed;z-index: 999999999;}
    #main{min-height: 100%;width: 100%;margin-top: 50px}
    </style>
</head>
<body>
<div id="nav">
</div>
<div id="main">
</div>
</body>
</html>

回答

編輯回答

熊出沒

BFC（Block formatting context）了解一下，面試必考

你的body與#main的margin重疊了,你可以讓body生成BFC，使兩者邊距不重疊

滿足以下條件之一即可創(chuàng)建BFC(不全)

根元素或其它包含它的元素
浮動元素 (元素的 float 不是 none)
絕對定位元素 (元素具有 position 為 absolute 或 fixed)
內(nèi)聯(lián)塊 (元素具有 display: inline-block)
表格單元格 (元素具有 display: table-cell，HTML表格單元格默認屬性)
表格標題 (元素具有 display: table-caption, HTML表格標題默認屬性)
具有overflow 且值不是 visible 的塊元素，
display: flow-root
column-span: all 應(yīng)當(dāng)總是會創(chuàng)建一個新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一個多列容器中

2018年6月1日 06:11

編輯回答

逗婦惱

nav 作為 fixed 是根據(jù)其父元素鏈上第一個非 static position 的元素來定位的，
在這里會找到 body。
然后你可以看到 body 并不是沿著屏幕上邊緣定位的，這是因為 body 的內(nèi)容是從 #main 的內(nèi)容開始的，于是當(dāng) body 的子元素 #main 有一個 margin-top 的時候，body 會擁有一個和他的子元素一樣的 margin-top。
所以平時應(yīng)該盡量不要給 body 的第一個子元素設(shè)置 margin-top，而是改成為 body 設(shè)置 padding-top。

如果幫到你請投 up 或者接受答案

2017年3月7日 16:45

編輯回答

貓小柒

一直在關(guān)注這個問題，其實BFC和Margin Collapse才是正確的方向，所采納的答案只不過是表象-算作經(jīng)驗而非知識，很難推而廣之。
關(guān)于BFC推薦一篇好文：理解BFC - Block formatting context
關(guān)于Margin Collapse先看一個定義

Css2.1規(guī)范：In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.
中文潤色一下是：所有毗鄰的兩個或更多盒元素的margin將會合并為一個margin共享之（合并時取其大的，不是相加）。毗鄰的定義為：同級或者嵌套的盒元素（即子元素和父元素之間也可能發(fā)生這個現(xiàn)象），并且它們之間沒有非空內(nèi)容、 Padding或Border分隔。

這就是所謂的Margin Collapse， body作為普通box容器，與其下緊鄰的非BFC box #main 發(fā)生margin collapse， #nav作為fixed box，默認top是auto，其值以fixed元素出現(xiàn)在html中的位置為準，而body因為共享了#main的margin，相當(dāng)于body上沿有個padding-top，導(dǎo)致 #nav默認下移。

解決方案（或的關(guān)系）

給body加 overflow:hidden, 觸發(fā)它的BFC （從本例中body的height 100%也可以看出，設(shè)置一個overflow是恰當(dāng)?shù)模?/li>
給body加 padding 或 border，打破發(fā)生 margin collapse的條件
顯式的給 #nav更新 top屬性
給#main設(shè)置 postion:absolue, 或display:inline-block 觸發(fā)它的BFC
即使給#main和#nav再包一層，也要這層有設(shè)置 boder或者 padding 或者 overflow-hidden

2018年6月30日 15:21

編輯回答