不同的瀏覽器顯示 CSS 的浮動方式

IE9 和 opera 的解析是正確的。

乙個元素浮點數：在之後，之後。 這兩個元素也保持正常，但因為它只有 200x200，所以它是。

乙個元素（如乙個 ** 漂浮在一段文字中，將文字擠壓成乙個迴圈）。

因為你沒有在你寫的 ** 中宣告 doctype，所以 Firefox 和 Chrome 會以非標準的 quirks 模式**解析你的文件，它只會顯示為非標準。 什麼是怪癖模式可以參考。

標準做法：

1. 在文件頂部宣告：

2.修改CSS，二

3. 記得在那裡。 在兩個之後新增乙個 clear 元素。

第二層也浮動到左邊，僅此而已！

返回頁首！ 如果您有任何問題，可以發言。

不同瀏覽器的相容性問題，請更改以在下面嘗試。

two{float:left;

width:200px;height:200px;

background:#001bc6;

浮動框可以向左或向右移動，直到其外邊緣接觸到包含該框或其他浮動框的邊框。

由於浮點數不在文件的正常流中，因此文件正常流中的塊框的行為就像浮點數不存在一樣。

請考慮下圖，當您將框 1 浮動到右側時，它將與文件流分離並向右移動，直到其右邊緣接觸包含框的右邊緣

同樣，當框 1 向左浮動時，它會與文件流分離並向左移動，直到其左邊緣接觸包含框的左邊緣。 由於它不再位於文件流中，因此它不會占用空間，並且實際上覆蓋了框 2，從而使框 2 從檢視中消失。

如果將所有三個框都向左移動，則 1 號框會向左浮動，直到它碰到包含的框，另外兩個框會向左浮動，直到它碰到前乙個框。

如下圖所示，如果包含框太窄而無法容納水平排列的三個浮動元素，則其他浮動塊會向下移動，直到有足夠的空間。 如果浮動元素的高度不同，則它們在向下移動時可能會被其他浮動元素“卡住”：

當然，3中的解釋是錯誤的。

這句話指的是元素以絕對位置排列的方式。

2.如果浮動元素在非浮動塊元素之前，則帶有非浮動鍵的舊塊元素的內容將顯示在浮動塊元素的行之後。

簡單的例子是，非浮動元素將圍繞浮動元素，這是實現包裹效果的基礎。

3.浮動元素後面的非浮動塊元素會忽略輪子和浮動元素的存在（怎麼會忽略浮動元素的存在？ ），顯示在浮動元素的開頭，顯示在非浮動塊元素的頂部（因為沒有無知，非浮動元素不會出現在浮動元素的開頭）。

這句話應改為： 3. Absolute Positioning 元素之後的 non-position 元素將忽略 Absolute Positioning 元素的存在，並顯示在 Absolute Positioning 元素開始的位置，Absolute Position 元素將顯示在非定位元素的頂部。

......以上就是這樣。