css浮動帶來什麼問題

css浮動帶來的影響：1、由於浮動元素脫離了文檔流，所以父元素的高度無法被撐開，影響了與父元素同級的元素；若沒有給父元素設定高度，那麼父元素就不會在顯示幕上顯示。 2.浮動元素不再佔用原始文件流的位置，它會對後面的元素排版產生影響。

本文操作環境：windows7系統、css3版本，Dell G3電腦。

推薦：css影片教學

我們要知道：浮動的框可以左右移動，直到遇到另一個浮動框或遇到它外緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響區塊級元素的佈局，只會影響內聯元素佈局。

此時文件流程中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現「高度塌陷」。

在父元素沒有設定高度的情況下，如果父元素裡的子元素設定了浮動，那麼父元素的高就不會自動被撐開的，也就沒有高度值。

顯然這樣設定浮動後出現了一些問題，例如：

• 父元素的margin受到影響，無法實現上下左右居中，

• 若沒有為父元素設定高度，浮動後父元素的高度沒有被撐開，那麼父元素就不會在顯示幕上顯示。

總結：浮動導致的後果

（1）由於浮動元素脫離了文件流，所以父元素的高度無法被撐開，影響了與父元素同級的元素；若沒有為父元素設定高度，那麼父元素就不會在顯示幕上顯示。

（2）與浮動元素同級的非浮動元素會跟隨其後，因為浮動元素脫離文檔流不佔據原來的位置

（3）如果該浮動元素不是第一個浮動元素，則該元素之前的元素也需要浮動，否則容易影響頁面的結構顯示

由於浮動元素不再佔用原始文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。

浮動如何清除？清除浮動流程

1.先對父級進行設定css高度進行清除，一般情況下，我們對高度設定一個高度，把內容高度設定成100px，上下框為2px，這樣一來，父級的總體高度就是102px。我們使用高度樣式，但是前提我們要計算好內容的高度。

2.利用clear:both屬性，進行清除浮動，我們可以在div中放入一個class="clear樣式，就可以清除浮動。

3.對父級div進行定義屬性，我們對父級css選擇器定義一個overflow:hidden樣式，就可以清除父級產生的浮動。

更多程式相關知識，請造訪：程式設計入門！ ！

以上是css浮動帶來什麼問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！