資訊專欄INFORMATION COLUMN
摘要：浮動(dòng)元素性質(zhì)，浮動(dòng)的元素脫離標(biāo)準(zhǔn)流這個(gè)元素像從標(biāo)準(zhǔn)流中被刪除一樣。下圖是左浮動(dòng)時(shí)的顯示效果。，浮動(dòng)的元素會(huì)互相貼靠如果父元素的寬度能顯示所有浮動(dòng)元素，則浮動(dòng)的元素會(huì)并排顯示。，無論是塊級(jí)元素行內(nèi)元素，一旦浮動(dòng)了，都可以設(shè)置寬高，不需要用。
浮動(dòng) 1.1、語法：
float: left; 左浮動(dòng)，元素往最左邊靠；
float: right; 右浮動(dòng)，元素往最右邊靠
1，盡可能遠(yuǎn)地向左或向右浮動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框?yàn)橹埂Ｈ缓笏?br>們下面的所有內(nèi)容會(huì)繞流這個(gè)元素（即像流體一樣繞著這個(gè)元素流動(dòng)）。
2，當(dāng)一個(gè)元素浮動(dòng)后，不會(huì)影響塊級(jí)元素的布局，只會(huì)影響內(nèi)聯(lián)元素（通常是文本或圖片）的布局。
**內(nèi)聯(lián)內(nèi)容 （包括文本）總會(huì)圍繞著浮動(dòng)元素，會(huì)留意浮動(dòng)元素的邊界；
塊元素 則會(huì)忽略浮動(dòng)元素，正常流向頁面。
1， 浮動(dòng)的元素脫離標(biāo)準(zhǔn)流：這個(gè)元素像從標(biāo)準(zhǔn)流中被刪除一樣。
1）下圖是兩個(gè)div正常標(biāo)準(zhǔn)流下的顯示效果。
2）下圖是div1左浮動(dòng)時(shí)的顯示效果。
為什么顯示效果是這樣 ：
1）瀏覽器擺放上述浮動(dòng)元素 div1時(shí)，把它盡可能放在最左邊。
2）瀏覽器會(huì)從流中刪除這個(gè)div1，就好像它浮在頁面上一樣。
3）由于div1已經(jīng)從正常流中刪除，所以標(biāo)準(zhǔn)流元素div2會(huì)往上移，填在該元素位置上。
2，浮動(dòng)的元素有“字圍”效果
浮動(dòng)元素不會(huì)擋住沒有浮動(dòng)元素中的文字和圖片 即浮動(dòng)元素下面的所有內(nèi)容會(huì)繞流這個(gè)元素（即像流體一樣繞著這個(gè)元素流動(dòng)）。
3，浮動(dòng)的元素會(huì)互相貼靠
a） 如果父元素的寬度能顯示所有浮動(dòng)元素，則浮動(dòng)的元素會(huì)并排顯示。
b） 如果父元素的寬度不能顯示所有浮動(dòng)元素，就會(huì)從最后一個(gè)開始往前貼靠。
c） 如果貼靠了前面所有浮動(dòng)元素后都不能顯示，最終會(huì)貼到父元素的左邊或右邊。
案例：如下圖中，父元素是body；
如果瀏覽器寬度足夠，則div3會(huì)靠著div2；如表格圖3
若靠著div2放不下，則div3會(huì)去靠div1；如表格圖2
若靠div1也放不下，則自己去貼左墻；如表格圖1
4，浮動(dòng)的元素如果不設(shè)置寬，高，就會(huì)收縮為文字所占的大小。
例：div1設(shè)置了浮動(dòng)，但沒設(shè)置寬、高，自動(dòng)縮緊為內(nèi)容的寬度。
強(qiáng)調(diào)：
1，宏觀的看，浮動(dòng)就是做“并排”的。
2，無論是塊級(jí)元素/行內(nèi)元素，一旦浮動(dòng)了，都可以設(shè)置寬高，不需要用display: block。因?yàn)楦?dòng)之后，脫離標(biāo)準(zhǔn)流了，所以標(biāo)準(zhǔn)流里面的規(guī)則都不適用了。
3，浮動(dòng)流中不能用margin:0 auto；也沒有居中對(duì)齊。
1， 水平導(dǎo)航欄
導(dǎo)航欄是鏈接列表，因此用
分析：
1）導(dǎo)航欄不需要列表項(xiàng)的標(biāo)記，因此要把圓點(diǎn)去掉；
2）還可把瀏覽器默認(rèn)設(shè)定的外邊距和內(nèi)邊距設(shè)為0；
3）水平方向擺放，對(duì)li進(jìn)行浮動(dòng)；
4）一般每個(gè)鏈接的寬度是一樣的，而且整個(gè)鏈接域都可點(diǎn)擊（不僅僅是文本），因此要對(duì)a進(jìn)行設(shè)置
5）接著進(jìn)行美化設(shè)置
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116754.html
摘要：清除浮動(dòng)，為何要清除浮動(dòng)浮動(dòng)效果會(huì)帶來不好的影響子元素浮動(dòng)會(huì)帶來父元素高度塌陷。，清除浮動(dòng)的兩大基本方式，運(yùn)用清除浮動(dòng)。元素流入頁面時(shí)，在這個(gè)元素左邊右邊或兩邊不允許有浮動(dòng)內(nèi)容。除了是用來清除浮動(dòng)的，其它代碼都是為了隱藏掉生成的內(nèi)容。 清除浮動(dòng) 1，為何要清除浮動(dòng) 浮動(dòng)效果會(huì)帶來不好的影響： 子元素浮動(dòng)會(huì)帶來父元素高度塌陷。具體解釋：當(dāng)浮動(dòng)框高度超出包含框時(shí)，包含框不會(huì) 自動(dòng)伸高 來閉...
摘要：內(nèi)聯(lián)元素在水平方向上相互挨著，總體上會(huì)從左上方流向右下方。，增加元素，設(shè)置屬性，兩個(gè)內(nèi)聯(lián)元素并排擺放，但只有左右方向有。還能與其它內(nèi)聯(lián)元素并排。 寫在前面：作為一個(gè)剛開始寫技術(shù)博客的新手，看到有人收藏了文章，寫作動(dòng)力又猛增了。這應(yīng)該就是寫技術(shù)博客的好處之一：能給自己增加成就感和驅(qū)動(dòng)力。最近關(guān)于css布局和定位相關(guān)內(nèi)容整理地有點(diǎn)慢，因?yàn)橥瑫r(shí)在做freecodecamp上的題，所以節(jié)奏有點(diǎn)...
摘要：，高級(jí)選擇器后代選擇器空格表示后代選擇器就是的后代所有的。注意是后代，并不一定是兒子空格可以出現(xiàn)多次補(bǔ)充后代選擇器中出現(xiàn)的東西很靈活，可以是標(biāo)簽，可以是名，可以是名后代選擇器，就是一種平衡共性特性的平衡。 一，選擇器 1，基礎(chǔ)選擇器 1） 標(biāo)簽選擇器：div{ } ，選擇的所有，而不是一個(gè)，用來描述共性。 2） 類選擇器：.class名{ } 多個(gè)元素可以同時(shí)屬...
摘要：盒模型，盒模型看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。盒子實(shí)際占用的大小是左左右右，屬性細(xì)節(jié)一個(gè)塊元素的默認(rèn)寬度是，表示它會(huì)自動(dòng)延伸占滿可用的空間。表示元素之間的距離，在邊框外部。不能對(duì)和指定顏色，添加任何裝飾。 盒模型 1，盒模型： CSS看待元素的一種方式，它將每個(gè)元素看作由一個(gè)盒子表示。 2，五個(gè)屬性： 從內(nèi)往外： width:內(nèi)容的寬度，而不是盒子的寬度； hei...
摘要：在元素中使用元素是一個(gè)元素，沒有結(jié)束標(biāo)記表示鏈入的是樣式表，在中可省略不寫。一般頁面中，中文用宋體黑體微軟雅黑，英文使用。英文字體要放在最前面，中文字體后面的備選字體用逗號(hào)隔開。表示方法可用像素指定或使用或百分?jǐn)?shù)相對(duì)于字體大小指定。 一、基礎(chǔ)介紹 1， css：cascading style sheet 層疊式樣式表2， 語法：p {background-color:red...
閱讀 4009·2023-04-26 02:13
閱讀 2251·2021-11-08 13:13
閱讀 2739·2021-10-11 10:59
閱讀 1739·2021-09-03 00:23
閱讀 1311·2019-08-30 15:53
閱讀 2286·2019-08-28 18:22
閱讀 3058·2019-08-26 10:45
閱讀 736·2019-08-23 17:58
