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

clasnake 發布于2019-08-30 15:53 / 1300人閱讀

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

浮動 1.1、語法：

float: left; 左浮動，元素往最左邊靠；
float: right; 右浮動，元素往最右邊靠

1.2、floa屬性：

1，盡可能遠地向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框為止。然后它
們下面的所有內容會繞流這個元素（即像流體一樣繞著這個元素流動）。

2，當一個元素浮動后，不會影響塊級元素的布局，只會影響內聯元素（通常是文本或圖片）的布局。
**內聯內容（包括文本）總會圍繞著浮動元素，會留意浮動元素的邊界；
塊元素則會忽略浮動元素，正常流向頁面。

1.3、浮動元素性質：

1，浮動的元素脫離標準流：這個元素像從標準流中被刪除一樣。
1）下圖是兩個div正常標準流下的顯示效果。

2）下圖是div1左浮動時的顯示效果。

為什么顯示效果是這樣：
1）瀏覽器擺放上述浮動元素 div1時，把它盡可能放在最左邊。
2）瀏覽器會從流中刪除這個div1，就好像它浮在頁面上一樣。
3）由于div1已經從正常流中刪除，所以標準流元素div2會往上移，填在該元素位置上。

2，浮動的元素有“字圍”效果
浮動元素不會擋住沒有浮動元素中的文字和圖片即浮動元素下面的所有內容會繞流這個元素（即像流體一樣繞著這個元素流動）。

3，浮動的元素會互相貼靠
a）如果父元素的寬度能顯示所有浮動元素，則浮動的元素會并排顯示。
b）如果父元素的寬度不能顯示所有浮動元素，就會從最后一個開始往前貼靠。
c）如果貼靠了前面所有浮動元素后都不能顯示，最終會貼到父元素的左邊或右邊。
案例：如下圖中，父元素是body；
如果瀏覽器寬度足夠，則div3會靠著div2；如表格圖3
若靠著div2放不下，則div3會去靠div1；如表格圖2
若靠div1也放不下，則自己去貼左墻；如表格圖1

4，浮動的元素如果不設置寬，高，就會收縮為文字所占的大小。
例：div1設置了浮動，但沒設置寬、高，自動縮緊為內容的寬度。

強調：
1，宏觀的看，浮動就是做“并排”的。
2，無論是塊級元素/行內元素，一旦浮動了，都可以設置寬高，不需要用display: block。因為浮動之后，脫離標準流了，所以標準流里面的規則都不適用了。
3，浮動流中不能用margin:0 auto；也沒有居中對齊。

1.4 應用案例

1，水平導航欄
導航欄是鏈接列表，因此用

是非常合適的
html代碼如下：

分析：
1）導航欄不需要列表項的標記，因此要把圓點去掉；
2）還可把瀏覽器默認設定的外邊距和內邊距設為0；
3）水平方向擺放，對li進行浮動；
4）一般每個鏈接的寬度是一樣的，而且整個鏈接域都可點擊（不僅僅是文本），因此要對a進行設置

5）接著進行美化設置

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

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

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

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

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

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

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

nevermind 2019-08-30 15:53 評論0 收藏0
【零基礎入門】 css學習筆記（3）選擇器與層疊性

摘要：，高級選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現多次補充后代選擇器中出現的東西很靈活，可以是標簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。一，選擇器 1，基礎選擇器 1）標簽選擇器：div{ } ，選擇的所有，而不是一個，用來描述共性。 2）類選擇器：.class名{ } 多個元素可以同時屬...

cppprimer 2019-08-29 15:43 評論0 收藏0
【零基礎入門】 css學習筆記（2）盒模型

摘要：盒模型，盒模型看待元素的一種方式，它將每個元素看作由一個盒子表示。盒子實際占用的大小是左左右右，屬性細節一個塊元素的默認寬度是，表示它會自動延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對和指定顏色，添加任何裝飾。盒模型 1，盒模型： CSS看待元素的一種方式，它將每個元素看作由一個盒子表示。 2，五個屬性：從內往外： width:內容的寬度，而不是盒子的寬度； hei...

mrcode 2019-08-30 15:53 評論0 收藏0
【零基礎入門】 css學習筆記（1）字體顏色樣式等

摘要：在元素中使用元素是一個元素，沒有結束標記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號隔開。表示方法可用像素指定或使用或百分數相對于字體大小指定。一、基礎介紹 1， css：cascading style sheet 層疊式樣式表2，語法：p {background-color:red...

fai1017 2019-08-30 15:53 評論0 收藏0