CSS學習摘要-浮動與清除浮動

時間 2019-11-24

標籤 css 學習摘要浮動清除欄目 CSS 简体版

原文原文鏈接

如下從浮動到BFC的段落摘自MDN 網絡開發者css

float 浮動

float CSS屬性指定一個元素應沿其容器的左側或右側放置，容許文本和內聯元素環繞它。該元素從網頁的正常流動中移除，儘管仍然保持部分的流動性（與絕對定位相反）。html

一個浮動元素是float的值不爲none的元素。前端

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;

因爲float意味着使用塊佈局，它在某些狀況下修改display 值的計算值：git

指定值	計算值
`inline`	`block`
`inline-block`	`block`
`inline-table`	`table`
`table-row`	`block`
`table-row-group`	`block`
`table-column`	`block`
`table-column-group`	`block`
`table-cell`	`block`
`table-caption`	`block`
`table-header-group`	`block`
`table-footer-group`	`block`
`flex`	`flex`, 可是float對這樣的元素不起做用
`inline-flex`	`inline-flex`, 可是float對這樣的元素不起做用
other	unchanged

備註：若是要在 JavaScript 中把float屬性看成element.style對象的一個成員來操做，那麼在Firefox 34 和更老的版本中，你必須拼寫成cssFloat。另外還要注意到在 Internet Explorer 8 和更老的IE當中，要使用styleFloat屬性。這是DOM駝峯命名和CSS所用的連字符分隔命名法對應關係中的一個特例（這是由於在 JavaScript 中"float"是一個保留字，由於一樣的緣由，"class"被改爲了"className" 、"for"被改爲了"htmlFor"）。github

語法

float 屬性的值被指定爲單一的關鍵字，值從下面的值列表中選擇。web

值

leftcanvas

代表元素必須浮動在其所在的塊容器左側的關鍵字。瀏覽器

right網絡

代表元素必須浮動在其所在的塊容器右側的關鍵字。app

none

代表元素不進行浮動的關鍵字。

inline-start

關鍵字，代表元素必須浮動在其所在塊容器的開始一側，在ltr腳本中是左側，在rtl腳本中是右側。

inline-end

關鍵字，代表元素必須浮動在其所在塊容器的結束一側，在ltr腳本中是右側，在rtl腳本中是左側。

形式化語法

left | right | none | inline-start | inline-end

例子

<style type="text/css">
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
</style>

<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
</div>

浮動元素是如何定位的

正如咱們前面提到的那樣，當一個元素浮動以後，它會被移出正常的文檔流，而後向左或者向右平移，一直平移直到碰到了所處的容器的邊框，或者碰到另一個浮動的元素。

在下面的圖片中，有三個紅色的正方形。其中有兩個向左浮動，一個向右浮動。要注意到第二個向左浮動的正方形被放在第一個向左浮動的正方形的右邊。若是還有更多的正方形這樣浮動，它們會繼續向右堆放，直到填滿容器一整行，以後換行至下一行。

清除浮動

在前面的例子當中，浮動的元素的高度比它們所在的容器元素（是塊元素）的高度小。然而若是塊元素內的文本過短，不足以把塊元素的大小撐到高度大於全部浮動元素的高度，咱們可能會看到意想不到的效果。例如，若是上面圖片中的文字只有"Lorem ipsum dolor sit amet,"，而且接下來是另一個和"Floats Example"這個標題同樣風格的標題元素，那麼第二個標題元素會出如今紅色的正方形之間。然而在大多數這種狀況下，咱們但願這個標題元素是靠左對齊的。爲了實現這個效果，咱們須要清除浮動。

這個例子中，最簡單的清除浮動方式就是給咱們想要確保左對齊的新標題元素添加clear屬性：

h2.secondHeading { clear: both; }

然而這個方法只是在同一塊級格式化上下文（block formatting context）中沒有其餘元素的時候纔是有效的。若是咱們的 H2 有兄弟元素是向左浮動和向右浮動的邊欄，那麼使用clear 會致使這個標題元素出如今邊欄的下方，這顯然不是咱們指望的結果。

若是不能使用清除浮動，另外一種作法是浮動容器的限制塊級格式化上下文。再次列舉上面的例子，有三個紅色的正方形和一個P元素。咱們能夠設置P元素的overflow屬性值變成hidden或者auto，由於這樣可讓容器元素伸展到可以包含紅色正方形，而不是讓他們超出塊元素的底部。

p.withRedBoxes { overflow: hidden; height: auto; }

Note: 設置overflow爲scroll 也可讓塊元素撐大來包含全部的浮動子元素，可是這樣不論內容有多少都會顯示出一個滾動條。即便 height 默認值爲 auto，咱們仍是設置了，是爲了代表容器應該增大高度以便包裹住裏面的內容。

clear 清除浮動

clear CSS 屬性指定一個元素是否能夠在它以前的浮動元素旁邊，或者必須向下移動(清除浮動) 在它的下面。clear 屬性適用於浮動和非浮動元素。

clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

clear: inherit;

當應用於非浮動塊時，它將非浮動塊的邊框邊界移動到全部相關浮動元素外邊界的下方。這個行爲做用時會致使margin collapsing不起做用。

當應用於浮動元素時，它將元素的外邊界移動到全部相關的浮動元素外邊界的下方。這會影響後面浮動元素的佈局，後面的浮動元素的位置沒法高於它以前的元素。

要被清除的相關浮動元素指在相同塊級格式化上下文中的前置浮動。

註釋:若是你想要一個元素將全部浮動元素包含在內，你既能夠將這個容器設置爲浮動，又能夠經過 ::after 僞元素設置clear屬性做爲替代。

/* best practical*/
/* old */
.clearfix:before, .clearfix:after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new */
.clearfix::before, .clearfix::after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

/* old clearfix */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

語法

clear: none
clear: left
clear: right
clear: both

clear: inherit

值

none

元素不會向下移動清除以前的浮動。

left

元素被向下移動用於清除以前的左浮動。

right

元素被向下移動用於清除以前的右浮動。

both

元素被向下移動用於清除以前的左右浮動。

inline-start

inline-start是一個關鍵字，表示該元素向下移動以清除其包含塊的起始側上的浮動。即在某個區域的左側浮動或右側浮動。

inline-end

inline-end是一個關鍵字，表示該元素向下移動以清除其包含塊的末端的浮點，`即在某個區域的右側浮動或左側浮動。

示例

注意: 給div添加'wrapper'類，使其添加一個邊框，以便更好觀察到實體的此屬性被清除。

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

若是上例中，樣式中的float: left 都改成了float：right的話，則相應clear： right。
而若是左浮動和右浮動都有的樣式，則clear: both。（both：二者）

BFC 塊格式上下文

塊格式化上下文（Block Formatting Context，BFC） 是Web頁面的可視化CSS渲染的一部分，是佈局過程當中生成塊級盒子的區域，也是浮動元素與其餘元素的交互限定區域。

下列方式會建立塊格式化上下文：

根元素或包含根元素的元素。
浮動元素（元素的 float值不是 none）。
絕對定位元素（元素的 position（position屬性用於指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。) 爲 absolute （絕對定位）或 fixed（固定定位）。
行內塊元素（元素的 display 爲 inline-block。
表格單元格（元素的 display爲 table-cell，HTML表格單元格默認爲該值）
表格標題（元素的 display爲 table-caption，HTML表格標題默認爲該值）
匿名錶格單元格元素（元素的 display爲 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分別是HTML table、row、tbody、thead、tfoot的默認屬性）或 inline-table）
overflow值不爲 visible 的塊元素。
display值爲 flow-root 的元素。
contain 值爲 layout、content或 strict 的元素。
彈性元素（display爲 flex 或 inline-flex元素的直接子元素）
網格元素（display爲 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count或 column-width 不爲 auto，包括 ``column-count 爲 1）
column-span 爲 all 的元素始終會建立一個新的BFC，即便該元素沒有包裹在一個多列容器中( 標準變動，Chrome bug）。

建立了塊格式化上下文的元素中的全部內容都會被包含到該BFC中。

塊格式化上下文對浮動定位與清除浮動都很重要。浮動定位和清除浮動時只會應用於同一個BFC內的元素。浮動不會影響其它BFC中元素的佈局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。外邊距摺疊（Margin collapsing）也只會發生在屬於同一BFC的塊級元素之間。

如下開始，就不是摘自MDN，而是換成摘自博客園小馬哥&的相關博文，再加以整理和添加本身的一點思路而成。

行內元素和塊級元素

級別	元素
行內元素	a,b,strong,span,img,label,button,input,select,textarea
塊級元素	header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

標籤分爲行內元素與塊級元素
二者區別和特色：
- 行內元素能與其它行內元素並排共處一行，而塊級元素獨佔一行；
- 行內元素設置width無效，height無效（能夠設置line-height)，margin和padding在上下方向的設置無效；
- 行內元素適合顯示具體內容，而塊級元素適合作佈局；
- 行內元素通常是內容的容器，而塊級元素通常是其餘容器的容器；
行內元素轉化爲塊級元素，使用display：block
塊級元素轉化爲行內元素，使用display：inline

標準文檔流和脫離標準流

web網頁的製做，就像是一個「流」，從上而下，像「織毛衣」。
標準文檔流下的微觀現象：

空白摺疊現象
- 多個空格會被合併成一個空格顯示到瀏覽器頁面中。
高矮不齊，底邊對齊
- 文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊。
自動換行，一行寫不滿，換行寫
- 若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字。

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動
（2）絕對定位
（3）固定定位

總結

浮動四大特性

浮動的元素脫標
- 脫離標準流，漂浮，遮蓋標準流下的元素
浮動的元素互相貼靠
- 沒有足夠空間互相貼靠時，往邊靠
浮動的元素有「字圍」（文字圍繞）效果
- 所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。
浮動元素緊湊效果（收縮）
- 一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）

佈局浮動的原則

按佈局來講，通常都不會是一個盒子單獨浮動起來，每每是橫向區域的盒子一塊兒浮動。且爲了避免影響接下來的文檔標準流，每每也要收尾作出清除浮動。

爲何要清除浮動？

在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）

試想一想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，產品經理說頁面某一塊的區域，須要加點內容，或者以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

因此父盒子咱們通常不設置高度，而由子元素的內容去撐起父盒子的高度。那麼當這個子元素是浮動的時候，父盒子沒有高度，浮動子元素是不會填充父盒子的高度的，這個時候就會有下一欄的盒子跑過來到浮動子元素的下面被覆蓋摭擋了，很是影響頁面佈局。

浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，但同時它還帶來了頁面佈局極大的錯亂！！！因此咱們要在浮動完以後再作一步清除浮動的操做（並不影響浮動子元素以前的佈局，只是爲了下排的佈局不亂。）

清除浮動的方法

給父盒子設置高度（不推薦，除非萬年不變的導航欄之類）
clear:both（左右浮動都可清除）
- 給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both
- 又被稱爲內牆法，平白無故添加了div元素，結構冗餘
僞元素清除法（經常使用）
- 給浮動子元素的父盒子，也就是不浮動的元素，添加一個clearfix的類，而後設置。
```
.clearfix:after{
  /*要寫這三句話去實現*/ 
  content: '.'; 
  clear: both; 
  display: block;
}
```
overflow：hidden（經常使用加推薦）
- overflow：auto也能夠清除浮動，但auto會出現滾動條，因此仍是使用不影響佈局的hidden，推薦使用這種方法，原理大體是藉助了BFC（塊格式上下文）實現的。

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。