'溢出和清除浮動的區別是什麼？

HTML'溢出和清除浮動的區別是什麼？

<ul> 
<li> 
    <button>first part</button> 
    </li> 
<li> 
    <button>second part</button> 
</li> 
    <li> 
    <button>third part</button> 
    </li> 
    </ul> 
<div id="bottom">Believe Me</div>

CSS

body { 
    font-size: 16px; 
} 
li { 
    list-style: none; 
    width: 300px; 
    border: 1px solid black; 
    margin-top: 20px; 
    overflow: hidden; 
} 
li button { 
    padding: 15px 10px; 
    margin: 2px; 
    display: block; 
    float: right; 
} 
div#bottom { 
    width: 100px; 
    height: 50px; 
    line-height: 50px; 
    background-color: red; 
    margin-top: 50px; 
}

我們經常使用下面的類來清除 '浮動';

.clearfix{ 
    clear:both; 
    overflow: hidden; 
    contain: ''; 
}

有時候，我們只能用'溢出'，那可以解決我們的問題。

'overflow'和'clear'之間有什麼區別？

code about this question

來源

2016-03-04 dukegod

[clearfix hack和overflow：hidden vs overflow：auto？]（http：// stackoverflow。com/questions/1642565/what-is-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto） – dippas

奇怪比較，因爲overflow和clear完全無關。除非我誤解了你的問題。在這種情況下，請重新措辭，以便我們可以更好地澄清。

無論如何，溢出控制超出元素寬度的任何多餘部分。

overflow屬性指定如果內容溢出元素的方框會發生什麼情況。

如果你有一個包含大量圖像的DIV，你要限制的圖像不超過容器的寬度，溢出將做到這一點給它一個hidden值。如果您希望它在某個寬度或高度後滾動，則scroll值將激活滾動條以允許您這樣做。

Clear另一方面，重置浮游物。

clear屬性指定元素浮動元素的哪一側不允許浮動。

這對響應式設計特別有用，可以在大型顯示器中將物品置於右側，但您希望將其重置爲原始左側位置以放置較小的設備。當然，使用clear可以根據您的需要來決定其他因素。

上面提到的應該是這樣

<div class="box"> 
    <button class="right">Hello</button> 
</div>

CSS

.right{ 
    float: right; 
} 
@media (max-width: 420px){ 
    .right{ 
     clear: right; 
    } 
}

來源

2016-03-04 02:52:52 LOTUSMS

溢出和清除是完全無關的，有很多關於它們如何交互的文章。例如https://stackoverflow.com/questions/1642565/what-is-the-different-between-clearfix-hack-and-overflowhidden-vs-overflowauto – edc65

在你的榜樣的例子，你有浮動元素一個「李」裏面（「按鈕」）。「clear」是float的姐妹屬性，設置爲該屬性的元素將通過清除相鄰的浮動元素來調整自身。浮動元素會影響容器元素的高度。根據你的例子是「li」標籤。溢出方法是解決這個問題的技術之一。在這裏瞭解更多關於浮點數的信息：https://css-tricks.com/all-about-floats/

來源

2016-03-04 03:35:59

'溢出和清除浮動的區別是什麼？

回答

相關問題