CSS浮動

CSSfloat屬性規定元素如何浮動

CSSclear屬性規定哪些元素可以在清除的元素旁邊以及在哪一側浮動。

float屬性

float屬性用于定位和格式化內容，例如讓圖像向左浮動到容器的文本那里。

float屬性可以設置以下值之一：

• left - 元素浮動到其容器的左側
• right - 元素浮動在其容器的右側
• none - 元素不會浮動（將顯示在文本中剛出現的位置）。默認值。
• inherit - 元素繼承其父級的float值

最簡單的用法是，float屬性可實現（報紙上）文字包圍圖片的效果。

?舉例：下例指定圖像應在文本中向左浮動。

img {float: left;
}

?舉例：

float設置為none，圖像將顯示在文本剛出現的位置（float:none;)

img {float: none;
}

?CSS清除浮動

clear屬性指定哪些元素可以浮動于被清除元素的旁邊以及哪一側。

clear屬性可設置以下值之一：

• none -? 允許兩側都有浮動元素。默認值
• left - 左側不允許浮動元素
• right - 右側不允許浮動元素
• both - 左側或右側均不允許浮動元素
• inherit - 元素繼承其父級的clear值

使用clear屬性的最常見用法是在元素上使用了float屬性之后。

在清除浮動時，應該對清除與浮動進行匹配：如果某個元素浮動到左側，則應清除左側。您的浮動元素會繼續浮動，但是被清除的元素將顯示在其下方。

div {clear: left;
}

?clearfix Hack

如果一個元素比包含它的元素高，并且它是浮動的，它將“溢出”到其容器之外：然后我們可以向包含元素添加overflow:auto; 來解決此問題：

.clearfix {overflow: auto;
}

?只要您能夠控制外邊距和內邊距（否則您可能會看到滾動條），overflow: auto 就會很好的工作。但是，新的現代clearfix hack技術使用起來更安全，以下代碼被應用于多數網站：

.clearfix::after {content: "";clear: both;display: table;
}

浮動實例

通過使用float屬性，可以輕松并排浮動內容框：

* {box-sizing: border-box;
}.box {float: left;width: 33.33%; /* 三個框（四框使用 25%，兩框使用 50%，以此類推） */padding: 50px; /* 如果需要在圖片間增加間距 */
}

?您可以輕松地并排創建三個浮動框，但是，當您添加一些內容來擴大每個框地寬度（例如，內邊距或邊框）時，這個框會損壞。box-sizing 屬性允許我們在框的總寬度（和高度）中包括內邊距和邊框，確保內邊距留在框內而不會破裂。

等高的框

上例我們學習了如果以相等的寬度并排浮動框。但是創建具有相同高度的浮動框并不容易。不過，快速解決方案是設置一個固定的高度。

.box {height: 500px;
}

但是，這么做就失去了彈性。如果可以保證框中始終具有相同數量的內容，那是可以的。但很多時候，內容是不一樣的。這時我們可以使用CSS Flexbox,?因為它可以自動拉伸框使其與最長的框一樣長：

.flex-container {display: flex;flex-wrap: nowrap;background-color: DodgerBlue;
}

所有CSS浮動屬性?

屬性	描述
box-sizing	定義元素的寬度和高度的計算方式：它們是否應包含內邊距和邊框。
clear	指定哪些元素可以在被清除的元素旁邊以及在哪一側浮動。
float	指定元素應如何浮動。
overflow	指定如果內容溢出元素框會發生什么情況。
overflow-x	指定當溢出元素的內容區域時，如何處理內容的左/右邊緣。
overflow-y	指定當溢出元素的內容區域時，如何處理內容的上/下邊緣。

CSS display:inline-block

與display：inline 相比，主要區別在于 display：inline-block 允許在元素上設置寬度和高度。同樣，如果設置了display：inline-block， 將保留上下外邊距/內邊距，而 display：inline則不會。與display：block相比，主要區別在于display：inline-block在元素之后不添加換行符，因此該元素可以位于其他元素旁邊。

使用inline-block 來創建導航鏈接：

display 的一種常見用法：inline-block 用于水平而不是垂直地顯示列表項。

.nav {background-color: yellow; list-style-type: none;text-align: center; padding: 0;margin: 0;
}.nav li {display: inline-block;font-size: 20px;padding: 20px;
}

水平和垂直對齊

居中對齊元素?

?要使塊元素（例如<div>）水平居中，請使用margin: auto; 設置元素地寬度將防止其延伸到容器地邊緣。然后，元素將占用指定的寬度，剩余空間將在兩個外邊距之間平均分配：

center {margin: auto;width: 50%;border: 3px solid green;padding: 20px;
}

?注意：如果未設置width屬性（或將其設置為100%），則居中對齊無效。

居中對齊文本

如果僅需在元素內居中文本，請使用text-align:center;?

.center {text-align: center;border: 3px solid green;
}

居中對齊圖像?

如需居中圖像，請將左右外邊距設置為auto，并將其設置為塊元素：

img {display: block;margin-left: auto;margin-right: auto;width: 40%;
}

左和右對齊 - 使用position

對齊元素的一種方法是使用position: absolute;

.right {position: absolute;right: 0px;width: 300px;border: 3px solid #73AD21;padding: 20px;
}

注意：絕對定位的元素將從正常流中刪除，并可能出現元素重疊。

左和右對齊 - 使用float

對齊元素的另一種方法是使用float屬性：

.right {float: right;width: 300px;border: 3px solid #73AD21;padding: 10px;
}

垂直對齊 - 使用padding?

有很多方法可以在CSS中垂直對齊元素。一個簡單的解決方案是使用上下內邊距：

.center {padding: 70px 0;border: 3px solid green;
}

垂直對齊 - 使用line-height

另一個技巧是使用其值等于height屬性值的line-height 屬性：

.center {line-height: 200px;height: 200px;border: 3px solid green;text-align: center;
}/* 如果有多行文本，請添加如下代碼：*/
.center p {line-height: 1.5;display: inline-block;vertical-align: middle;
}

垂直對齊 - 使用position 和 transform

?如果您的選擇不是padding 和 line-height，則另一種解決方案是使用position 和 transform 屬性：

.center { height: 200px;position: relative;border: 3px solid green; 
}.center p {margin: 0;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

垂直對齊- 使用Flexbox?

您還可以使用flexbox將內容居中。

.center {display: flex;justify-content: center;align-items: center;height: 200px;border: 3px solid green; 
}