MDN之Web 開發技術 clear屬性

clearcss 屬性指定乙個元素是否必須移動(清除浮動後)到在它之前的浮動元素下面。clear屬性適用於浮動和非浮動元素。

當應用於非浮動塊時，它將非浮動塊的邊框邊界移動到所有相關浮動元素外邊界的下方。這個非浮動塊的垂直外邊距會摺疊。

另一方面，兩個浮動元素的垂直外邊距將不會摺疊。當應用於浮動元素時，它將元素的外邊界移動到所有相關的浮動元素外邊框邊界的下方。這會影響後面浮動元素的布局，後面的浮動元素的位置無法高於它之前的元素。

要被清除的相關浮動元素指的是在相同塊級格式化上下文中的前置浮動。

注意：如果乙個元素裡只有浮動元素，那它的高度會是0。如果你想要它自適應即包含所有浮動元素，那你需要清除它的子元素。一種方法叫做clearfix，即clear乙個不浮動的::after偽元素。

#container::after

/* keyword values */

clear
: none;
clear
: left;
clear
: right;
clear
: both;
clear
: inline-start;
clear
: inline-end;
/* global values */
clear
: inherit;
clear
: initial;
clear
: unset;

left

元素被向下移動用於清除之前的左浮動。

right

元素被向下移動用於清除之前的右浮動。

both

元素被向下移動用於清除之前的左右浮動。

inline-start

該關鍵字表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區域的左側浮動或右側浮動。

inline-end

該關鍵字表示該元素向下移動以清除其包含塊的末端的浮點，即在某個區域的右側浮動或左側浮動。

none | left | right | both | inline-start | inline-end

class

=>
class
="black"
>
lorem ipsum dolor sit amet, consectetuer adipiscing elit. phasellus sit amet diam. duis mattis varius dui. suspendisse eget dolor.p
>
class
="red"
>
lorem ipsum dolor sit amet, consectetuer adipiscing elit.p
>
class
="left"
>
this paragraph clears left.p
>
div>
css.left
.black
.red
p在 codepen 中開啟 在 jsfiddle 中開啟
p在 codepen 中開啟 在 jsfiddle 中開啟
MDN之Web指南 內容分類
每乙個html元素都必須遵循定義了它可以包含哪一類內容的規則。這些規則被歸類為幾個常見的元素內容模型 content model 每個html元素都屬於0個 1 個或多個內容模型，每個模型都有一些規則使得元素中的內容必須遵循乙個html規範文件 html conformant document 以下...
web開發 web前端開發常用技術總結歸納
技術選型規範規範 vue版本 2.x 前端路由 vue route 非同步請求 axios 全域性狀態管理 vuex css預處理器 sass less h5專案移動端適配規則 使用rem單位 rem px換算規則統一 小程式 使用小程式自帶rpx單位,適配規則參考小程式文件 公用元件庫 ui元件庫...
Web應用開發技術 CSS
html元素屬性分類 cascading style sheet，層疊樣式表，一種樣式表語言，其作用是控制頁面內容的顯示外觀效果 css樣式設定 1.瀏覽器預設樣式 2.外部樣式表 在文件頭通過link元素鏈結css檔案 3.內部樣式表 直接在文件頭通過style元素指定 4.內聯樣式 直接在某個元...