清除浮動
形狀浮動
使用浮動可以控制相鄰元素間的排列關係。
float
: left;
/* 向左浮動 */
float
: right;
/* 向右浮動 */
float
: none;
/* 不浮動 */
浮動是對後面元素的影響，第二個元素設定浮動對第乙個元素沒有影響。
表示第乙個元素div.first-of-type
表示最後乙個元素div.last-of-type
div.first-of-type
div.last-of-type
兩個元素都設定浮動後，會併排顯示。
為第二個元素設定右浮動時移動到右邊
浮動元素邊界不能超過父元素的padding
元素浮動後會變為塊元素，包含行元素如span，所以浮動後的元素可以設定寬高
a
clear
: left;
/* 左邊遠離浮動元素 */
clear
: right;
/* 右邊遠離浮動元素 */
clear
: both;
/* 左右都元素浮動元素 */
.clearfix::after
將會使用父元素產生bfc機制，即父元素的高度計算會包括浮動元素的高度。
article
shape-outside
: margin-box;
/* 外邊距環繞 */
shape-outside
: padding-box;
/* 內邊距環繞 */
shape-outside
: border-box;
/* 邊線環繞 */
shape-outside
: content-box;
/* 內容環繞 */
clip-path
:circle
(50% at 50% 50%)
;/*圓形環繞*/
clip-path
:ellipse
(50% 80% at 100% 0%)
;/*橢圓環繞*/
clip-path
:polygon
(50% 0%,0% 100%,100%,100%)
;/*多邊形環繞*/
css浮動布局
float 是 css 的定位屬性。在傳統的印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為 文字環繞 在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣。浮動的元素仍然是網頁流的一部分。這與使用絕對 定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被...
CSS浮動布局
預設文件流就是對頁面布局不加任何修飾，元素自動的布局方式，其特點有 1 元素在頁面中的顯示順序與元素在 現的順序是一致的。2 塊級元素獨佔一行空間，寬度預設為父級的100 高度由其內容高度所決定。3 行內元素與其他元素共享一行空間，寬高由其內容所決定。但是預設文件流往往不能滿足我們的布局需求，我們可...
css 浮動布局
歡迎來到位元魔典 關於浮動的基礎知識，這裡先引用w3school的一段介紹，在此基礎上我會新增一些註記和補充 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。請看下圖，當把框 1 向右浮動...