成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

立即前往

首頁/文章專欄/css-浮動

css-浮動

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

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

一，浮動的定義

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

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

二，浮動的例子

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


  1
  2
  3

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

2.被卡住
demo 鏈接描述


  1
  2
  3

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

3.浮動和文本
demo鏈接描述


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

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

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

4.浮動會脫離普通流
普通流中所遵循的規(guī)則是塊級元素占據(jù)一行，行內(nèi)元素占據(jù)內(nèi)容的寬度。所有元素從上到下依次排列，普通元素可以把父元素的內(nèi)容撐開。
但浮動元素脫離了普通流，元素不是一個個從上到下排列的，浮動元素也不能把父元素撐開，因為父元素壓根就看不見浮動元素。
demo鏈接描述

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


  這是div
  這是span

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

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

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

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

三，浮動的副作用

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

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

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

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

四：清除浮動

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

clear: left;

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

clear: right;

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

clear:both;

如果我前面有浮動元素，我必須位于它的下方

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

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

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

五：浮動和負margin

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

六：總結(jié)

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