国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

立即前往

首頁/文章專欄/css-浮動(dòng)

css-浮動(dòng)

1treeS 發(fā)布于2019-08-29 17:11 / 881人閱讀

摘要：然而，接著浮動(dòng)盒創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短，為了給浮動(dòng)盒的讓出空間。

一，浮動(dòng)的定義

一個(gè)浮動(dòng)盒會(huì)向左或向右移動(dòng)，直到其外邊（outer edge）挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊。如果存在行盒，浮動(dòng)盒的外top（邊）會(huì)與當(dāng)前行盒的top（邊）對(duì)齊。如果沒有足夠的水平空間來浮動(dòng)，它會(huì)向下移動(dòng)，直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了

因?yàn)楦?dòng)（盒）不在普通流內(nèi)，在浮動(dòng)盒之前或者之后創(chuàng)建的未定位的（non-positioned）塊盒會(huì)豎直排列，就像浮動(dòng)不存在一樣。然而，接著浮動(dòng)盒創(chuàng)建的當(dāng)前及后續(xù)行盒會(huì)進(jìn)行必要的縮短，為了給浮動(dòng)（盒）的margin box讓出空間。

二，浮動(dòng)的例子

浮動(dòng)的定義很枯燥，下面我們通過幾個(gè)例子，來理解浮動(dòng)的概念。
1.浮動(dòng)盒放不下會(huì)換行
demo 鏈接描述


  1
  2
  3

執(zhí)行結(jié)果
所有盒子都會(huì)向左浮動(dòng)，直到外邊沿挨著塊邊沿。由于容器寬度不夠，box3放不下，就只能向下移動(dòng)最左邊

2.被卡住
demo 鏈接描述


  1
  2
  3

執(zhí)行結(jié)果
由于box1的高度比box2的高，box3在向下向左移動(dòng)的時(shí)候，遇到了box1的外邊沿，就停止移動(dòng)了。

3.浮動(dòng)和文本
demo鏈接描述


  1
  挨到包含塊邊沿或者另一個(gè)浮動(dòng)盒的外邊。如果存在行盒，浮動(dòng)盒的外top（邊）會(huì)與當(dāng)前行盒的top（邊）對(duì)齊
如果沒有足夠的水平空間來浮動(dòng)，它會(huì)向下移動(dòng)，直到空間合適或者不會(huì)再出現(xiàn)其它浮動(dòng)了
  2
  3

執(zhí)行結(jié)果
我們給p段落加上背景色，發(fā)現(xiàn)p段落是看不見浮動(dòng)元素的，但里面的文字是可以看見浮動(dòng)元素的。
當(dāng)一個(gè)普通元素遇到一個(gè)浮動(dòng)元素，普通元素是看不見浮動(dòng)元素的。但里面的行盒是可以看見浮動(dòng)元素的，行盒會(huì)縮短并給浮動(dòng)元素讓位。

寫一下我理解的行盒的概念。行盒就是 line-box，也就是一個(gè)塊級(jí)元素展示出的每一行就是一個(gè)行盒。塊級(jí)元素內(nèi)展示在一行的所有元素共同構(gòu)成了一個(gè)行盒。比如下圖的img和span1構(gòu)成一個(gè)行盒，剩下2個(gè)span和button構(gòu)成另外一個(gè)行盒。當(dāng)頁面面積發(fā)生改變，每行的內(nèi)容變化，行盒的內(nèi)容也會(huì)變化。
這里有一篇寫行盒(line box)垂直方向的文章鏈接描述

4.浮動(dòng)會(huì)脫離普通流
普通流中所遵循的規(guī)則是塊級(jí)元素占據(jù)一行，行內(nèi)元素占據(jù)內(nèi)容的寬度。所有元素從上到下依次排列，普通元素可以把父元素的內(nèi)容撐開。
但浮動(dòng)元素脫離了普通流，元素不是一個(gè)個(gè)從上到下排列的，浮動(dòng)元素也不能把父元素?fù)伍_，因?yàn)楦冈貕焊涂床灰姼?dòng)元素。
demo鏈接描述

5.塊級(jí)元素設(shè)置浮動(dòng)之后，寬度會(huì)收縮，寬度由內(nèi)容決定。
行內(nèi)元素設(shè)置浮動(dòng)之后，可以設(shè)置寬高，內(nèi)外邊距。
感覺有點(diǎn)像inline-block的特性


  這是div
  這是span

執(zhí)行結(jié)果

當(dāng)我們?nèi)∠?dòng)，結(jié)果是div占據(jù)一整行，span不能設(shè)置寬高和內(nèi)外邊距。

6.用浮動(dòng)設(shè)置一個(gè)簡單的導(dǎo)航欄

  
    
      1首頁
      2產(chǎn)品
      3服務(wù)
      4關(guān)于

三，浮動(dòng)的副作用

1.對(duì)后續(xù)元素位置產(chǎn)生影響
demo：鏈接描述

 
    側(cè)邊欄固定寬度
    側(cè)邊欄固定寬度
    內(nèi)容區(qū)塊自適應(yīng)寬度    
  
  我是 footer，但我的樣式出現(xiàn)了問題

執(zhí)行結(jié)果：
由于浮動(dòng)元素脫離普通文檔流，導(dǎo)致浮動(dòng)元素后面下一個(gè)元素footer的排列會(huì)出錯(cuò)。

（2）父容器高度計(jì)算出現(xiàn)問題
父元素看不到浮動(dòng)元素，如果父元素沒有設(shè)置高度，浮動(dòng)元素是無法撐開父容器的。
demo鏈接描述
/li里面的元素全部浮動(dòng)的情況下，.navbar的高度為0，所以設(shè)置背景色無效

四：清除浮動(dòng)

(1)clear屬性
clear可以用于任何元素，無論是不是浮動(dòng)元素都可以加。

clear: left;

官方解釋：要求該盒的top border邊位于源文檔中在此之前的元素形成的所有左浮動(dòng)盒的bottom外邊下方
不正經(jīng)的理解：如果我前面有左浮動(dòng)元素，我必須位于它的下方

clear: right;

官方解釋：要求該盒的top border邊位于源文檔中在此之前的元素形成的所有右浮動(dòng)盒的bottom外邊下方
不正經(jīng)的理解：如果我前面有右浮動(dòng)元素，我必須位于它的下方

clear:both;

如果我前面有浮動(dòng)元素，我必須位于它的下方

（2）封裝一個(gè)clearfix的屬性，用于父元素清除浮動(dòng)
原理：父元素看不見元素，導(dǎo)致高度不正常。那我們就放一個(gè)普通元素在父元素的最后，把高度撐開。因用偽元素可以省一個(gè)標(biāo)簽，所以就用偽元素

.clearfix::after {
  content:"";  //在父元素的最后生成一個(gè)內(nèi)容為空的元素。
  display: block; //生成的偽元素是內(nèi)聯(lián)元素，需要設(shè)置成塊級(jí)元素來占位置啊
  clear: both;  //把這個(gè)元素清除浮動(dòng)，放在父元素的最下方，把父元素?fù)伍_
}

使用：把.clearfix封裝成一個(gè)屬性，以后想要在哪里清除浮動(dòng)，就給它的父元素加上.clearfix的屬性。
demo鏈接描述

五：浮動(dòng)和負(fù)margin

兩個(gè)浮動(dòng)元素，如果因放不下導(dǎo)致其中一個(gè)下移，對(duì)下移的元素設(shè)置負(fù) margin 值。
當(dāng)-margin加自身的寬度小于容器的寬度，可將其上移.
如圖所示，當(dāng)box2的負(fù)margin為-2px，才能上移。

六：總結(jié)

1、浮動(dòng)元素脫離了普通文檔流，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣，但文本可以看見浮動(dòng)元素
2、設(shè)置浮動(dòng)后行內(nèi)元素?fù)碛幸恍K級(jí)元素的特性，可以設(shè)置寬高margin
塊級(jí)元素有了行內(nèi)元素的特性，不再占據(jù)一整行，寬度決定于自身內(nèi)容
3、浮動(dòng)元素不會(huì)將父容器撐開
4、浮動(dòng)元素左右浮動(dòng)時(shí)遇到其他浮動(dòng)元素會(huì)停止
5、如果用了浮動(dòng)，其父元素最好需要清除浮動(dòng)