浮動元素（Floats）

2018-05-15 17:26 更新
要求: HTML基礎(chǔ)知識(學(xué)習(xí)入門 HTML)，和CSS的工作理念(學(xué)習(xí)?入門 CSS)。
摘要: 學(xué)習(xí)如何創(chuàng)建浮動特性,比如刪除帽、浮動圖像，和多個列在網(wǎng)頁布局。

背景知識

最初，引入 float 屬性是為了能讓?web 開發(fā)人員實現(xiàn)簡單的布局，包括在一列文本中浮動的圖像，文字環(huán)繞在它的左邊或右邊。你可能在報紙版面上看到的東西。

但 Web 開發(fā)人員很快意識到，它可以浮動任何東西，而不僅僅是圖像，所以浮動的使用范圍擴大了。之前的?fancy paragraph example?的課程展示了如何使用float創(chuàng)建一個有趣的drop-cap效果。

現(xiàn)在，浮動通常用來創(chuàng)建整個網(wǎng)站布局，其中包括浮動的多列信息，因此它們彼此并排放置(默認(rèn)行為是列彼此之間的排列順序與它們在源中顯示的順序相同)。雖然有更新的更好的布局技術(shù)可用，但我們將在本模塊的后面探討，浮動仍然是最受喜歡的老物，因為它們可以支持到?Internet Explorer 4。

簡單的例子

讓我們來探討如何使用浮動。我們將從一個非常簡單的例子開始，包括在圖像周圍浮動一個文本塊。你可以跟隨在你的電腦上創(chuàng)建新的index.html文件，以填充它?simple HTML template, 以下代碼插入它在適當(dāng)?shù)牡胤?。底部的部分你可以看到一個生活最后的代碼應(yīng)該是什么樣子的例子。

首先,我們將開始與一些簡單的HTML——添加以下HTML的身體,刪除任何東西里面:

<h1>Simple float example</h1>

<img src="butterfly.jpg" >

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

現(xiàn)在將以下CSS應(yīng)用到您的HTML (using a <style> 元素或一個<link> 到一個單獨的 separate .css?文件 — 你的選擇):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

如果你現(xiàn)在保存并刷新,你就會看到的東西就像你期望什么,坐在上面的圖像文本,目前看起來有點丑陋。我們可以在它的中心容器,相反,我們將使用浮動浮動周圍的文本。下面添加以下規(guī)則你以前的規(guī)則:

img {
  float: left;
  margin: 0 30px 0 0;
}

現(xiàn)在，如果您保存和刷新，你會看到類似的東西如下:

因此，讓我們考慮一下float是如何工作的 - 浮動元素 (這個<img> element in this case)從文檔的正常布局流中取出并粘貼到其父容器的左側(cè) (<body>, 在這種情況下)。以下任何內(nèi)容,浮動元素在正常布局流將環(huán)繞,填充空間的右手邊就被浮動元素的頂部。在那里它會停止。

注意,浮動內(nèi)容仍然遵循正常箱行為諸如邊緣和邊界。我們把一些右邊緣圖像停止文本的右邊坐在它旁邊。

向右浮動的內(nèi)容是一樣的效果,但在反向浮動元素將堅持正確的,和內(nèi)容將向左環(huán)繞它。嘗試改變浮動值正確,在過去的規(guī)則換上margin-left margin-right,看看結(jié)果是什么。

再看下拉列表例子

如上所述，我們的 fancy paragraph example 從早先的課程精選了一個漂亮的cap. 在這個例子中,我們有一個簡單的段落:

<p>This is my very important paragraph.
 I am a distinguished gentleman of such renown that my paragraph
 needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>

我們的CSS看起來像這樣:

p {
  width: 400px;
  margin: 0 auto;
}

p::first-line {
  text-transform: uppercase;
}

p::first-letter {
  font-size: 3em;
  border: 1px solid black;
  background: red;
  float: left;
  padding: 2px;
  margin-right: 4px;
}

結(jié)果如下:

這里的效果與我們在圖像的第一個例子中所做的沒有很大的不同，但是這一次，我們在信中的第一個字母后面的其余部分是浮動的，在使這封信看起來顯得又大又大膽又有趣之后。

你可以漂浮任何的東西，只要有兩個項目的空間，以配合在一起。這使我們很好地談?wù)摱嗔胁季帧?/p>

多列浮動布局

Floats通常用于創(chuàng)建多個列布局，并且由于其廣泛的瀏覽器支持已經(jīng)有相當(dāng)一段時間。這是盡管事實上，他們不是真的打算這個工作，并有一些奇怪的副作用，必須處理，你會在后面的文章中看到。

兩列布局

讓我們先從最簡單的例子,一個兩列布局。您可以通過創(chuàng)建一個新的索引。html文件在您的計算機上,填充它simple HTML template, 并在適當(dāng)?shù)牡胤讲迦胂旅娴拇a。在該部分的底部，您可以看到一個活生生的例子，什么樣的最終代碼應(yīng)該看起來像。

首先，我們需要一些內(nèi)容放入我們的列。使用以下內(nèi)容替換正文中的任何內(nèi)容:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

每個列都需要一個外部元素來包含其內(nèi)容，并讓我們一次操作它的所有內(nèi)容。在這個例子中，我們選擇了<div>但，你可以選擇更多語義合適的東西<article>s,?<section>s, 和<aside>,諸如此類。

現(xiàn)在為CSS將以下內(nèi)容應(yīng)用到HTML以提供一些基本設(shè)置:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

將body的90％的視口寬，直到它的寬度900px，在這種情況下，它將保持固定在這個寬度和中心本身在視口。 默認(rèn)情況下，它的孩子 (這個<h1> 和兩個 <div>s)span將跨越body的100% 寬度。如果我們想要兩個<div>以便彼此并排浮動， 我們需要將它們的寬度設(shè)置為其父元素的寬度100％或更小，以便它們可以彼此并排。將以下內(nèi)容添加到CSS的底部:

div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}

在這里我們設(shè)置了他們的父親的寬度的48％ - 這總計96％，留下我們4％自由作為兩列之間的溝槽，給內(nèi)容一些空間呼吸?，F(xiàn)在我們只需要浮動列，像這樣:

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

把這些結(jié)合在一起應(yīng)該跟我們結(jié)果一樣:

你會注意到，我們使用所有寬度的百分比 - 這是一個很好的策略，因為它創(chuàng)建一個liquid layout, 一種調(diào)整為不同的屏幕尺寸，并在較小的屏幕尺寸下保持相同的列寬度比例。請嘗試調(diào)整瀏覽器窗口的寬度，以便自己查看。這是響應(yīng)式網(wǎng)頁設(shè)計的一個有價值的工具，我們將在以后的模塊中討論。

注意:你可以看到這個例子運行在 0_two-column-layout.html (參見 the source code).

你需要注意的是,列可以開始看起來可怕的時候變得很窄。一般意義切換回單個列布局窄屏幕(如手機),可以通過使用媒體查詢。再一次,您將了解這些在未來響應(yīng)網(wǎng)頁設(shè)計模塊。

另一種選擇是將寬度設(shè)置為一個固定的單位如雷姆或像素——你可以看到一個例子two-column-layout-fixed.html (see source code), 或?qū)⑼ㄟ^消除max-width聲明自己的例子,和改變寬度900 px,分別為430 px和430 px。這叫做固定寬度的布局——如果你調(diào)整你的瀏覽器大小現(xiàn)在,你會發(fā)現(xiàn)不再布局調(diào)整以適應(yīng)窗口寬度,和你需要滾動在較小的尺寸。

現(xiàn)在我們將用流體布局。

三列布局

你已經(jīng)有了一個兩列布局工作,添加一個第三列(或更多)并不是太難。你只需要添加另一個列在同一個父元素。開始通過添加以下?<div>就在另外兩個(或我們(or use 0_two-column-layout.html as a starting point):

<div>
  <h2>Third column</h2>
  <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
</div>

現(xiàn)在更新你的CSS如下:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

這將給我們以下結(jié)果:

這里有很少我們沒有見過;唯一的真正的區(qū)別是，我們有這個額外的列來應(yīng)對 - 讓它坐在正確的地方，我們已經(jīng)漂浮它離開;我們也給了它 margin-left of 4%, 創(chuàng)建一個排水溝之間的第一和第二列。我們設(shè)置列寬,這樣他們都健康— 36% + 30% + 4% + 26% = 96%, 這讓一個 4% 剩余部分在第二和第三列之間形成一個溝槽(該自然溝槽將總是出現(xiàn)在左浮動列和右浮動列之間的點，無論哪里。)

這里需要注意的一點是，你必須仔細(xì)考慮你的列的源順序，以及它們?nèi)绾胃樱缘玫狡谕慕Y(jié)果。你的內(nèi)容應(yīng)該有道理當(dāng)讀源階(認(rèn)為有視覺障礙的人使用屏幕閱讀器來聽你的內(nèi)容-你如何布局你的內(nèi)容沒有區(qū)別他們)，但是你也需要考慮，在內(nèi)容源的訂單將出現(xiàn)在命令之前浮動元素太所以進(jìn)一步的左左浮動的情況下，再到右下右飄。為了說明我們的意思，試著改變 float 第二列向右 (或者看看 three-column-layout-wrong-order.html (source code)). 現(xiàn)在你會看到，如下:

div1  div3  div2

這是因為第二個<div>在source order上比第三個<div>等級要高?(DOM上第二個<div>先出現(xiàn)并聲明了float right) ，所以在float order 上也會比第三個<div>等級要高。又因為兩者同時像右浮動，第二個<div>就會更加地靠右。

注:完成了這一點您可以找到的例子1_three-column-layout.html (see source code).

清除浮動

現(xiàn)在你已經(jīng)開始看到有趣的花車。不過,你很快就能夠碰到一個問題——所有內(nèi)容在漂浮,如果不是處理看起來可怕。為了我們所說低于的第三個環(huán)繞浮動元素,嘗試添加以下HTML?<div>元素 (并檢查 2_float-disaster.html (source code)):

<footer>
  <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
</footer>

你會發(fā)現(xiàn)旁邊的頁腳是包裝在空間最長的列,看起來可怕的——我們真正想要的頁腳留在底部,下面的所有列。好吧,幸運的是有一個簡單的方法來解決這個問題的 clear 屬性。當(dāng)你將它應(yīng)用到一個元素，它基本上說"停止浮動在這里" - 這個元素和它之后的源將不會浮動，除非你應(yīng)用一個新的 float 聲明到另一個元素。

所以，要解決我們的問題，添加以下規(guī)則到您的CSS:

footer {
  clear: both;
}

這將給你一個頁腳的行為本身和坐在您的列，喜歡它應(yīng)該做的是:

清除 可以采用三個值：

  • Left:停止左側(cè)浮動
  • right:停止右側(cè)浮動
  • both: 停止左右浮動

你通常只需要設(shè)置清除:兩者在元素上你想要的浮動停止;在某些情況下，您只需要取消左或右引號。

注:你可以在這個階段找到例子 2a_fixed-by-clear.html (see source code).

浮動問題

以上部分提供了使用浮動創(chuàng)建簡單布局的基礎(chǔ)，但是還有一些問題需要解決。 讓我們談?wù)勥@些問題。

整個寬度可能難以計算

到目前為止，我們的例子是沒有應(yīng)用樣式的浮動框——這很容易。當(dāng)你開始給這些框加上樣式時，比如 borders, padding 等等，問題就來了。為了更好了解這個問題，可以將下面的 CSS 加入到你的代碼里?(你也可以看這個例子?3_broken-layout.html (source code)):

div, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

此時，您將看到您的布局已損壞 - 由于填充和邊框引入的額外寬度，三列不再適合一行，因此第三列下降到另外兩列。

我們有很多方法可以解決上面的問題，但最好的方法是給你的html加上下面的css。

* {
  box-sizing: border-box;
}

box-sizing 將我們box的width的計算方式變?yōu)榱薱ontent + padding + border，而不是之前的content的width，所以當(dāng)我們增加padding或border的width時，我們不會增加我們box的width。相反我們的content的width會縮小padding或border增加的寬度。

我們有另一個問題 —?頁腳正壓在最長列上， 在這一點并不理想—讓我們嘗試修復(fù)沿著這個?margin-top 它清理給頁腳部分:

footer {
  clear: both;
  margin-top: 4%;
}

然而，這不起作用?— floated元素在某些方面表現(xiàn)相當(dāng)奇怪，它存在于正常的文檔布局流程之外:

  • 首先，他們父元素的內(nèi)部有一個高度為0 — 嘗試在瀏覽器中加載1_three-column-layout.html 并檢查高度 <body> 查看?developer tools, 你會看到我們的平均元素?— body報告的高度 <h1> 只有. 這可以固定在各種方式，但我們依靠一個被清除浮在父容器的底部，如我們在我們的當(dāng)前示例所做的那樣。 如果在當(dāng)前示例中檢查正文的高度，您應(yīng)該會看到它的高度本身。
  • 其次，你不能在非浮動元素上使用邊距去創(chuàng)建它們之間的浮動空間— 這是我們在這里眼前的問題，我們將在下面實施修復(fù)。
  • 文章概述了所有關(guān)于Floats使用以及修復(fù)一些奇怪的元素。

所以，讓我們解決這個！ 首先，在HTML的頁添加，新的<div> 元素，在上方頁腳:

<div class="clearfix"></div>

如果你沒有一個元素可以清除，你可以添加一個不可見的 "clearfix div" 元素，在你想要清除的浮動后是非常有用的 (就像頁腳), 但在這里也有用。接下來我們要做的是清除:both; 聲明了對頁腳進(jìn)行樣式化的規(guī)則，并將其放在clearfix div上:

.clearfix {
  clear: both;
}

我們現(xiàn)在有一個很好的頂部邊緣，但也有另一個問題— 列和頁腳。cleardiv div 被賦予相同背景填充邊框！為了解決這個問題，讓我們先給每個列div一個類的列:

<div class="column">
  ...
</div>

?現(xiàn)在將框樣式改變規(guī)則，讓我們應(yīng)用到div和footer，這樣只有div列樣式:

.column, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

這只是為了現(xiàn)在解決它。

注:?查看在這個階段最后一個固定的例子4_fixed-layout-border-box.html (source code).

另一點要注意的是，box-sizing Internet Explorer 8不支持 — 如果你明確需要支持舊瀏覽器，你可能需要手動調(diào)整列寬度以允許填充和邊框?qū)挾取？紤]到你不能使用百分比調(diào)整大小邊框，你需要留出足夠空間，同時盡可能多填充父級寬度，但這不是一個非常精確的技術(shù)?— 你可以在操作中看到這樣的修復(fù) fixed-layout-adjusted-percentages.html (見源代碼)。

浮動項目的背景高度

到目前為止，我們建好的示例是有效的，但另一個問題是列高度是不同的 - 如果列都是相同的高度，它看起來會更好。

我們可以通過給所有的列固定來解決這個問題height (see 5_fixed-height-columns.html (源代碼):

.column {
  height: 550px;
}

然而在許多情況下這并不理想—它使設(shè)計呆板。如果你能保證列中總是有相同數(shù)量的內(nèi)容，這是可以的，但這并不總是如此— 在很多類型的網(wǎng)站上，內(nèi)容也會定期更改。

Flexbox是一種新的布局設(shè)計，flexbox可自動伸展列，只要解決技術(shù)上它們伸展的長柱問題。

你也可以考慮:

  1. 將列的背景顏色設(shè)置為與其父背景相同的顏色，但不能高度不同。這是目前最好的選擇。
  2. 將它們部分溢出設(shè)置為固定寬度并使內(nèi)容滾動使用overflow (參見我們的示例。)
  3. 在柱的父元素上繪制假背景 - 這種技術(shù)叫偽列，該元素看起來像列的背景。這涉及到從實際列中移除背景(與邊框)不幸的是，這將無法處理列邊框。?詳見對于偽列和偽列流體布局的教程。

清除浮動會變復(fù)雜

我們在文章中建立的簡單例子很容易理解，但是當(dāng)布局變得更加復(fù)雜清理也會變得更加復(fù)雜。如果你沒有一個方便的容器在必要的地方使用clearfix divs將被清理。你需要確保任何浮動的內(nèi)容盡快清除，以避免降低麻煩。

總結(jié)

在接下來的文章中，我們將采取更進(jìn)一步的定位創(chuàng)造添置相當(dāng)復(fù)雜的網(wǎng)格布局。在這一點上，你會掌握一些強大的工具。

以上內(nèi)容是否對您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號