2017-09-10 29 views
-1

我使用css的邊框屬性。當我不添加溢出屬性時,它不包含id內容的所有元素。爲什麼邊框不能覆蓋所有元素

#contents{border-radius: 10px; border: 1px solid red;overflow:hidden;}
<div id="contents"> 
 
    \t \t \t \t <aside> 
 
    \t \t \t \t \t <nav> 
 
    \t \t \t \t \t \t <ul> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Home Page</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Main Settings</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Sections</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Pages</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Comments</a> 
 
    \t \t \t \t \t \t \t <a class="btn-danger" href="">Library</a> 
 
    \t \t \t \t \t \t </ul> \t \t \t \t 
 
    \t \t \t \t \t </nav> 
 
    \t \t \t \t </aside> 
 
    \t \t \t \t <section id="page"> 
 
    \t \t \t \t \t <p>Hello </p> 
 
    \t \t \t \t </section> 
 
    </div>

enter image description here

enter image description here

爲什麼加溢出元件成代碼可以被校正???

回答

1

從我所看到的,你有一個浮動元素問題,問題是。

CSS clearfix用於修復與父元素中的浮動子元素 相關的問題。沒有clearfix,你的孩子不會像你期望的那樣行爲。當一個HTML元素被浮動時,它可能會出現在其父元素之外,這意味着它不會相應地調整父級高度。

所以在你的情況下,內部元素是浮動元素。因此容器沒有正確檢測高度。

爲什麼它在您使用overflow:hidden時有效?

的溢出方法依賴於設置 父元素溢出CSS屬性。如果此屬性設置爲自動或隱藏在父元素 上,則父級將展開以包含浮點數, 可有效地清除後續元素。

所以這可能是父母填滿空間的原因。

要閱讀更多有關CSS clearfixes Read herehere

相關問題