零基礎入門 css學習筆記(6) 清除浮動

2021-09-13 16:06:36 字數 2132 閱讀 9792

浮動效果會帶來不好的影響:子元素浮動會帶來父元素高度塌陷。

具體解釋:

當浮動框高度超出包含框時,包含框不會 自動伸高 來閉合浮動元素,會出現「高度塌陷」現象。正是因為浮動的這種特性,導致本屬於普通流中的元素 浮動後,包含框內部由於不存在其他普通流元素了,也就表現出高度為0,在實際布局中,這並不是我們所希望的,所以需要閉合浮動元素,使包含框表現出正常的高度。

舉例說明:

1)下圖所示:普通流中,父元素container1高度為 3個div撐起的高度。

2)現在想要三個div併排顯示,則將3個div設定float:left;效果如下。

問題出現了:父元素container1 高度塌陷了。

3)父元素container1高度塌陷,則其下方的元素會跑上來。

強調:

1)正常情況下:div中如果有內容,它能被內容撐出高度,但如果其中的內容是浮動的,則撐不起高度了,其高度變為0。

2)在上述例子中,container1本來是被撐出了高度的,但由於給div1,2,3設定了浮動,因此其高度沒有了,變為了0。

1,運用clear:both;

clear:both;清除浮動。元素流入頁面時,在這個元素左邊、右邊或兩邊不允許有浮動內容。

1) 「內牆法」: 在浮動元素最後新增乙個冗餘元素,並為其設定clear:both;

**如下圖:

原理

由於它左右兩邊不能有浮動元素,因此,它會跑到浮動元素下方,而container1父元

素需要包裹住#cl ,其高度就被撐開了。注:#cl div其高度為0;

缺點:要在頁面中新增沒有意義的冗餘元素,比較麻煩,而且不符合語義化。

2)clearfix:after 偽元素方法:給父元素新增乙個clear類,既方便又符合語義化。

原理: 為了減少寫乙個無意義的div 元素,在clearfix 內容後面使用after新增乙個content充當「元素」。

除了clear:both;是用來清除浮動的,其它**都是為了隱藏掉content生成的內容。

更精簡的寫法:

附上content和after用法:

after用法舉例:在container1尾部新增1個content,頁面效果如下圖所示。

2,父元素bfc或haslayout

父元素設定` overflow: hidden;

bfc相關知識還未完全理解,理解後再詳細寫。

《零基礎入門學習Python》學習筆記1

第一講 我和python的第一次親密接觸 python輸出語句 print i love python 注意後面沒有分號 python可以直接進行加法乘法等運算,沒有變數型別的限制,比如c語言規定了整型變數不能超過多少位 print i love you 8 自動列印8遍 第二講 用python設計...

《零基礎入門學習Python》學習筆記2

python常用操作符 冪運算子 取商運算子 取餘數 邏輯運算子 and or not 優先順序 冪運算子 正負號 算數運算子 比較運算子 邏輯運算子 了不起的分支和迴圈 if語句 while迴圈 for迴圈 跟c語言不太一樣 range函式 range start,end,步長 打了激素的列表 列...

零基礎入門學習Python

課程介紹 前半部分主要講解python3的語法特性,後半部分著重講解python3在爬蟲 tkinter pygame遊戲開發等例項上的應用。整個系列共16個章節,前邊13個章節從乙個小遊戲引入python,逐步介紹python的語法以及語言特色。最後3個章節為案例的演示,是前邊內容的總結和提高。課...