過去的幾年中，CSS布局以及我們開發網站前端的方式發生了巨大變化。現在，在CSS用于開發站點的布局方法方面，我們有了真正的選擇，這意味著我們經常需要選擇采用哪種方法。在本文中，我將通過解釋如何使用它們以及如何使用它們的基礎知識，介紹您可以使用的各種布局方法。

結構化文檔以利用常規流程

通過確保文檔以結構良好的方式開始，您可以利用正常的流程。想象一下，如果不是瀏覽器這種正常流動的概念，而是瀏覽器將所有盒子堆疊在彼此的角上，直到創建布局。那意味著您將必須將所有單個內容放置在頁面上。而是，瀏覽器以立即可讀的方式顯示我們的內容。

如果您的CSS無法加載，則用戶仍然可以閱讀內容，而完全不獲取CSS的用戶（例如，使用屏幕閱讀器的用戶）將按照文檔中的順序將內容交付給他們。從可訪問性的角度來看，使HTML文檔井井有條地開始生活至關重要。但是，這也將使您作為Web開發人員的生活更加輕松。如果您的內容符合用戶希望閱讀的順序，則無需對布局進行大量更改即可將其放置在正確的位置。使用更新的布局方法，您可能會驚訝于您要做的事很少。

因此，在考慮布局之前，請考慮文檔結構和您希望從文檔頂部到底部閱讀內容的順序。

遠離正常流量

有了結構合理的文檔后，我們需要決定如何采用該文檔并將其轉換為所需的布局。對于我們文檔的某些部分，這將涉及偏離正常流程。我們有整套的布局方法可供使用。我們將要研究的第一種方法是float，因為浮點數很好地說明了從正常流中取出元素的含義。

浮點數

浮動框用于將框向左或向右移動，以使內容圍繞它顯示。

為了浮動項目，請使用CSS屬性float和一個left或right值。float的默認值為none。

值得注意的是，當您浮動一個項目并用文本環繞時，會縮短該內容的行框。如果您浮動某個項目，并且以下包含您的文本的框應用了背景色，則可以看到該背景色將在該浮動項下運行。

在縮短行框以在浮動文本和自動換行文本之間留出空間時，必須在浮動項目上設置邊距。文本上的邊距只是將文本從容器的邊緣移入。對于向左浮動的圖像，假設您希望圖像與容器的頂部和左側齊平，則應在右側和底部添加邊距。

內容的背景色在浮動下運行

清算浮動

浮動元素后，以下所有元素將環繞該浮動元素，直到它們包裹在下面，并且正常流程繼續進行。如果要防止這種情況，則需要清除浮點數。

在要在浮動之后開始顯示的元素上，添加clear值為left 的屬性以指示清除向左浮動的項目，向右以清除向右浮動的項目，或同時清除所有浮動。

如果希望元素在浮點后開始，則上述方法有效。如果您發現自己的狀態是盒子里有一個漂浮的物品，并且旁邊有一些文字，那將無濟于事。如果文本比浮動項目短，則將在內容下方繪制該框，而忽略浮動項目。正如我們已經了解的那樣，浮點數會縮短線框，其余的布局將繼續正常流動。

為了防止這種情況，我們需要清除包裝箱內的東西。我們可以添加一個空元素并將其設置為清除所有元素。這涉及將空div粘貼到我們的文檔中，這并不理想，如果您的頁面是由CMS生成的，則可能無法實現。因此，典型的清除浮動方法是所謂的清除修補程序。此方法通過添加CSS生成的內容并將其設置為清除兩者來起作用。

塊格式化上下文

清除框內浮點數的另一種方法是在容器上調用塊格式化上下文（BFC）。塊格式上下文包含其中的所有內容，其中將包括無法再戳出框底部的浮動項目。有幾種強制BFC的方法，清除浮點數時最常見的方法是將溢出屬性設置為具有默認可見值以外的值。

以這種方式使用溢出通常會起作用，但是，在某些情況下，您最終可能會在項目上留下陰影或不必要的滾動條。在樣式表中看起來也有些混亂：您是否設置了溢出是因為需要滾動條還是只是為了獲得這種清除功能？

為了使意圖更清晰并防止創建BFC引起不必要的副作用，可以將其flow-root用作該display屬性的值。唯一要做的display: flow-root就是創建一個BFC，從而清除浮標而不會引起其他問題。

浮點數的舊用法

在使用較新的布局方法來創建列布局之前，浮動技術一直通過為一組項目提供一定的寬度并將它們設置為彼此相鄰浮動來起作用。仔細管理這些浮動框的百分比大小可能會產生網格效果。

我不建議立即開始新設計并使用此方法。但是，它將在現有站點中保留很多年。因此，如果遇到幾乎所有東西都漂浮的設計，那么這就是使用的技術。

定位

要從普通流中刪除元素或將其從普通流中的位置移開，可以使用positionCSS中的屬性。正常流動時，元素position的static。這些項目在“塊”維度中一個接一個地顯示，如果滾動頁面，它們也會隨之滾動。

更改位置值時，通常還會使用偏移值將框從特定參考點移開。使用的參考點取決于您使用的位置值。

相對定位

如果項目具有position: relative參考點，則該參考點通常是正常流動的地方。然后，您可以使用偏移的屬性值top，left，bottom和right移動從那里通常會顯示框。

請注意，頁面上的其他項目不會響應元素的新位置。保留了它在正常流程中的位置，因此您需要自己管理所有重疊部分。

絕對定位

設置position: absolute的一個項目，它完全從正常流程中移除。剩下的空間將被刪除。然后，將相對于其包含的塊定位該項目，除非將其嵌套在另一個定位的元素內，否則它將為視口。

因此，如果position: absolute在項目上進行設置，將會發生的第一件事是，它通常最終會卡在視口的頂部和左側。然后，您可以使用偏移的屬性值top，left，bottom并right從該位置移動框，你希望它是。

通常，您不希望根據視口放置盒子，但是在引用包含元素時，它位于內部。在這種情況下，您需要為包含該元素的位置賦予默認靜態值以外的位置值。

由于設置position: relative不會從正常流程中刪除該項目，因此這是通常的選擇。給您希望設置偏移的父元素，position: relative然后從該元素的邊界偏移絕對定位的塊。

固定定位

position: fixed在大多數情況下，帶有的東西將相對于視口放置，并從文檔流中刪除，因此不會為其保留任何空間。滾動頁面時，固定元素將相對于視口保持在適當的位置，因為正常流中的其余內容照常滾動。

這有助于啟用固定的導航面板，該面板在屏幕上（例如，在內容滾動時）保持在屏幕上。與其他定位值一樣，這樣做可能會導致重疊，因此應注意所有內容都可以讀取并且不會以固定項目結尾。