div定位，奇數行爲

Question

我正在研究單頁網頁設計，我想使用hrefs和＃來鏈接同一個存檔中的不同位置，所需的功能是在點擊時移動到鏈接位置，這樣做但是，只有當我浮動左A，B divs， 我不明白這一點，A和B的divs已包含其他的東西，但如果我不把浮動：留在CSS中，鏈接不工作。這是爲什麼？

#A, 
 
#B { 
 
    float: left; 
 
} 
 
.cont1 { 
 
    width: 100%; 
 
    height: 1500px; 
 
    background-color: #2077a5; 
 
    float: left; 
 
}

<div id="nav"> 
 
    <ul> 
 
    <li><a href="#A">About</a> 
 
    </li> 
 
    <li><a href="#B">Portfolio</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div id="A"> 
 
    <div id="about" class="cont1"> 
 
    About page content goes here. 
 
    </div> 
 
</div> 
 

 
<div id="B"> 
 
    <div id="portfolio" class="cont1"> 
 
    Portfolio page content goes here. 
 
    </div> 
 
</div>

編輯：哇，這是一些快速的解答，非常感謝，我想我不理解，我的問題是，爲什麼，如果我不設置任何風格的A和B的div鏈接不工作，他們不通過被定義風格的div容器自動擴展一個定位？

Answer 1

如果您堅持使用float:left;爲#A和#B，加clear:both;到第一個規則，讓他們在同一行不會開始（在這種情況下，本地錨就沒有任何意義）：

#A, 
#B { 
    float: left; 
    clear: both; 
} 

http://codepen.io/anon/pen/NRRxGy

加成COMMENT及問題編輯AFTER：

要嘗試看看，刪除浮動A和B（http://codepen.io/anon/pen/bwwEAr），並在開發工具一起看看吧：兩個#A和「 B的尺寸爲1406 x 0（！），並且位於相同的位置。

這是因爲只包含浮動元素的DIV將沒有「官方」高度（即他們不會包裝其實際內容） - 搜索關於浮動的問題以獲取示例。所以垂直方向上，「未展開的」#A和#B處於同一高度，這就是鏈接導致相同滾動位置的原因。奇怪的東西，但這一切都與浮動元素和浮動元素如何影響其容器的高度有關。

Answer 2

問題是你設置.cont1類爲兩個部分，並使他們左側浮動高度爲1500px。這個CSS

#A, #B { 
    min-width: 100%; 

} 

.cont1 { 
    height: 100vh; 
    background-color: #2077a5; 
    } 

你可以使用id =「約」和id =「組合」的鏈接嘗試，這樣你就不需要額外的div＃A，B

<div id="nav"> 
    <ul> 
    <li><a href="#about">About</a></li> 
    <li><a href="#portfolio">Portfolio</a></li> 
</ul> 
</div> 


<div id="about" class="cont1"> 
    About page content goes here. 
</div>  



<div id="portfolio" class="cont1"> 
    Portfolio page content goes here. 
</div> 

.cont1 { 
width: 100%; 
height: 1500px; 
background-color: #2077a5; 
float: left; 
}