CSS clear屬性給float帶來哪些影響

2022-09-25 01:42:08 字數 876 閱讀 5978

關於clear屬性的定義參考:w3school 在閱讀w3school相關內容時一定要認真,認真,仔細,仔細閱讀「說明」部分:「如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外urfkrdx邊距邊界之下」。

ok, 下面舉例說明下clear屬性到底給float(clear常常和float結合使用)帶來哪些影響:

html片段一:

複製**

**如下:

#parentdiv

.ret

.fl

.fr

www.cppcns.comt">

效果:由於float導致兩個子div(#son1, #son2)不佔文件流,所以雖然兩個子div的高為200px,但是父div#parentdiv的高度是0px。

問題:有時候我們需要父div的高度正好容納下所有的子div。在這種情況下我們可以使用clear屬性了。

h程式設計客棧tml片段二:在html片段一的基礎上新增css class:clear,給父div新增個子div(#son3)

複製**

**如下:

#parentdiv

.ret

.fl

.fr

.clear

urfkrdx

效果:這種情況下父div的高度是200px(和子d中最高的高度一樣)。

分析:

子div(#son3)使用了clear屬性,這樣其上外邊框在float元素(#son1,#son2)下外邊框的下面,因為子div#son3要佔文件流,所以父div不得不增加高度來容納子div#son3,這樣也就達到了預期效果。

本文標題: css clear屬性給float帶來哪些影響

本文位址:

Spring給屬性賦值

在spring中,我們給屬性賦值一般使用 value註解。按功能分可以將 value分為三類 value 張三 private string name value private int age 這裡賦值18 value private string clname cname.properties ...

vue 給物件新增屬性

根據官方文件定義 如果在例項建立之後新增新的屬性到例項上,它不會觸發檢視更新。當你把乙個普通的 j ascript 物件傳入 vue 例項作為data選項,vue 將遍歷此物件所有的屬性,並使用object.defineproperty把這些屬性全部轉為 getter setter。受現代 j as...

Vue 給物件新增屬性

vue 不允許在已經建立的例項上動態新增新的根級響應式屬性 root level reactive property 然而它可以使用 vue.set object,key,value 方法將響應屬性新增到巢狀的物件上 vue.set vm.obj,e 0 您還可以使用 vm.set 例項方法,這也是...