【零基礎入門】css學習筆記（6）清除浮動

BingqiChen 發布于2019-08-30 15:53 / 3334人閱讀

摘要：清除浮動，為何要清除浮動浮動效果會帶來不好的影響子元素浮動會帶來父元素高度塌陷。，清除浮動的兩大基本方式，運用清除浮動。元素流入頁面時，在這個元素左邊右邊或兩邊不允許有浮動內容。除了是用來清除浮動的，其它代碼都是為了隱藏掉生成的內容。

清除浮動 1，為何要清除浮動

浮動效果會帶來不好的影響： 子元素浮動會帶來父元素高度塌陷。
具體解釋：
當浮動框高度超出包含框時，包含框不會自動伸高來閉合浮動元素，會出現“高度塌陷”現象。正是因為浮動的這種特性，導致本屬于普通流中的元素浮動后，包含框內部由于不存在其他普通流元素了，也就表現出高度為0，在實際布局中，這并不是我們所希望的，所以需要閉合浮動元素，使包含框表現出正常的高度。

舉例說明：
1）下圖所示：普通流中，父元素container1高度為 3個div撐起的高度。

2）現在想要三個div并排顯示，則將3個div設置float:left;效果如下。
問題出現了：父元素container1 高度塌陷了。

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

強調：
1）正常情況下：div中如果有內容，它能被內容撐出高度，但如果其中的內容是浮動的，則撐不起高度了，其高度變為0。
2）在上述例子中，container1本來是被撐出了高度的，但由于給div1,2,3設置了浮動，因此其高度沒有了，變為了0。

2，清除浮動的兩大基本方式：

1，運用clear:both;
clear:both; 清除浮動。元素流入頁面時，在這個元素左邊、右邊或兩邊不允許有浮動內容。
1） “內墻法”：在浮動元素最后添加一個冗余元素，并為其設置clear:both;
代碼如下圖：

原理：
由于它左右兩邊不能有浮動元素，因此，它會跑到浮動元素下方，而container1父元
素需要包裹住#cl ，其高度就被撐開了。注：#cl div其高度為0；

缺點：要在頁面中添加沒有意義的冗余元素，比較麻煩，而且不符合語義化。

2）clearfix:after 偽元素方法：給父元素添加一個clear類，既方便又符合語義化。

原理: 為了減少寫一個無意義的div 元素，在clearfix 內容后面使用after添加一個content充當“元素”。

通過content:“.”；生成內容作為最后一個元素。

display:block; 使生成的元素以塊級元素顯示；

height:0; 避免生成內容破壞原有布局的高度；

visibility:hidden;使生成的內容不可見；

zoom:1；觸發 IE hasLayout。

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

更精簡的寫法：

附上content和after用法:

after用法舉例：在container1尾部添加1個content，頁面效果如下圖所示。

2，父元素BFC或haslayout
父元素設置` overflow: hidden;

BFC相關知識還未完全理解，理解后再詳細寫。

云服務器 GPU云服務器零基礎入門學習零基礎入門深度學習零基礎入門學習python 基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116752.html

【零基礎入門】 css學習筆記（5）浮動

摘要：浮動元素性質，浮動的元素脫離標準流這個元素像從標準流中被刪除一樣。下圖是左浮動時的顯示效果。，浮動的元素會互相貼靠如果父元素的寬度能顯示所有浮動元素，則浮動的元素會并排顯示。，無論是塊級元素行內元素，一旦浮動了，都可以設置寬高，不需要用。浮動 1.1、語法： float: left; 左浮動，元素往最左邊靠； float: right; 右浮動，元素往最右邊靠 1.2...

clasnake 2019-08-30 15:53 評論0 收藏0
【零基礎入門】 css學習筆記（4）布局與定位介紹

摘要：內聯元素在水平方向上相互挨著，總體上會從左上方流向右下方。，增加元素，設置屬性，兩個內聯元素并排擺放，但只有左右方向有。還能與其它內聯元素并排。寫在前面：作為一個剛開始寫技術博客的新手，看到有人收藏了文章，寫作動力又猛增了。這應該就是寫技術博客的好處之一：能給自己增加成就感和驅動力。最近關于css布局和定位相關內容整理地有點慢，因為同時在做freecodecamp上的題，所以節奏有點...

nevermind 2019-08-30 15:53 評論0 收藏0
CSS 布局經典問題初步整理

摘要：布局經典問題初步整理標簽前端本文主要對布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負，清除浮動，居中布局，響應式設計，布局，等等。 CSS 布局經典問題初步整理標簽：前端 [TOC] 本文主要對 CSS 布局中常見的經典問題進行簡單說明，并提供相關解決方案的參考鏈接，涉及到三欄式布局，負 margin，清除浮動，居中布局，響應式設計，Fl...

Amos 2019-08-29 12:36 評論0 收藏0
CSS入門指南-2：盒子模型、浮動和清除

摘要：會在元素內容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。這是CSS設計指南的讀書筆記，用于加深學習效果。上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。盒子模型所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。可見的頁面版式主要由三個屬性...

ConardLi 2019-08-29 12:59 評論0 收藏0
CSS入門指南-2：盒子模型、浮動和清除

摘要：會在元素內容而不是元素后插入一個偽元素使用意味著中新增的子元素會被清除左右浮動元素。這一篇主要介紹了盒子模型，浮動和清除。這是CSS設計指南的讀書筆記，用于加深學習效果。上一篇介紹了css 的工作原理，這一篇主要介紹盒子模型和浮動。盒子模型所謂盒子模型，就是瀏覽器為頁面中的每個HTML元素生成的矩形盒子。這些盒子們都要按照可見版式模型在頁面上排布。可見的頁面版式主要由三個屬性...

charles_paul 2019-08-01 17:13 評論0 收藏0