float屬性如何阻擋元素？

根據層疊樣式表級別2修訂2（CSS 2.2）規範，當元素被賦予浮動屬性而不是無，它隱式設置顯示爲阻止，但我看到它的方式，它的行爲像一個內聯 - 塊元素，因爲它不佔用其父寬度的100％。
一個例子：

這兩個藍色bloxes漂浮到左側，這樣他們隱含地設置爲顯示：塊，但他們並沒有採取包裝DIV（紅色矩形）的整個寬度上。float屬性如何阻擋元素？

HTML代碼

<div class="wrapper cf"> 
    <div class="box"></div> 
    <div class="box"></div> 
</div>

CSS代碼

.wrapper { 
    background-color: red; 
    padding: 10px; 
} 

.box { 
    margin: 10px; 
    height: 100px; 
    width: 100px; 
    background: lightblue; 
    float: left; 
} 
.cf:after { 
    content: ""; 
    display: block; 
    clear: both; 
}

來源

2016-07-24 3abkareeno

能否請你顯示了上面的例子的完整代碼？ –

@JonathanLam完成！ – 3abkareeno

你不是明確定義'width'爲'100px'嗎？因此，它們不應占據紅色矩形的整個寬度。 –

「有一個簡單的解決方案，修復了很多的IE浮動的bug。所有的花車都成爲一個方塊箱;該標準指出，浮點數的display屬性將被忽略，除非它被指定爲none。如果我們設置display：inline作爲浮動元素，那麼一些IE/Win bug會像魔術一樣消失。 IE /贏不會使元件進入一個行內框，但許多錯誤的是固定的。」 [浮法佈局]

作爲該所暗示的，在添加塊的主要原因是，用於固定該問題想出了在IE中的花車。儘管display：block是隱式定義的，但除了設置爲無之外，顯示值在技術上不適用於浮動元素。

如果您想了解更多關於浮動，這是一個相當不錯的文章：CSS Float Theory: Things You Should Know

來源

2016-07-24 22:52:49

float屬性如何阻擋元素？

回答

相關問題