浮動(dòng)元素（Floats）

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

背景知識(shí)

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

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

現(xiàn)在，浮動(dòng)通常用來(lái)創(chuàng)建整個(gè)網(wǎng)站布局，其中包括浮動(dòng)的多列信息，因此它們彼此并排放置(默認(rèn)行為是列彼此之間的排列順序與它們?cè)谠粗酗@示的順序相同)。雖然有更新的更好的布局技術(shù)可用，但我們將在本模塊的后面探討，浮動(dòng)仍然是最受喜歡的老物，因?yàn)樗鼈兛梢灾С值?Internet Explorer 4。

簡(jiǎn)單的例子

讓我們來(lái)探討如何使用浮動(dòng)。我們將從一個(gè)非常簡(jiǎn)單的例子開(kāi)始，包括在圖像周圍浮動(dòng)一個(gè)文本塊。你可以跟隨在你的電腦上創(chuàng)建新的index.html文件，以填充它?simple HTML template, 以下代碼插入它在適當(dāng)?shù)牡胤健５撞康牟糠帜憧梢钥吹揭粋€(gè)生活最后的代碼應(yīng)該是什么樣子的例子。

首先,我們將開(kāi)始與一些簡(jiǎn)單的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> 元素或一個(gè)<link> 到一個(gè)單獨(dú)的 separate .css?文件 — 你的選擇):

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

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

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

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

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

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

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

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

再看下拉列表例子

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

<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看起來(lái)像這樣:

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é)果如下:

這里的效果與我們?cè)趫D像的第一個(gè)例子中所做的沒(méi)有很大的不同，但是這一次，我們?cè)谛胖械牡谝粋€(gè)字母后面的其余部分是浮動(dòng)的，在使這封信看起來(lái)顯得又大又大膽又有趣之后。

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

多列浮動(dòng)布局

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

兩列布局

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

首先，我們需要一些內(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>

每個(gè)列都需要一個(gè)外部元素來(lái)包含其內(nèi)容，并讓我們一次操作它的所有內(nèi)容。在這個(gè)例子中，我們選擇了<div>但，你可以選擇更多語(yǔ)義合適的東西<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，在這種情況下，它將保持固定在這個(gè)寬度和中心本身在視口。 默認(rèn)情況下，它的孩子 (這個(gè)<h1> 和兩個(gè) <div>s)span將跨越body的100% 寬度。如果我們想要兩個(gè)<div>以便彼此并排浮動(dòng)， 我們需要將它們的寬度設(shè)置為其父元素的寬度100％或更小，以便它們可以彼此并排。將以下內(nèi)容添加到CSS的底部:

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

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

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

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

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

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

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

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

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

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

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

三列布局

你已經(jīng)有了一個(gè)兩列布局工作,添加一個(gè)第三列(或更多)并不是太難。你只需要添加另一個(gè)列在同一個(gè)父元素。開(kāi)始通過(guò)添加以下?<div>就在另外兩個(gè)(或我們(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é)果:

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

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

div1  div3  div2

這是因?yàn)榈诙€(gè)<div>在source order上比第三個(gè)<div>等級(jí)要高?(DOM上第二個(gè)<div>先出現(xiàn)并聲明了float right) ，所以在float order 上也會(huì)比第三個(gè)<div>等級(jí)要高。又因?yàn)閮烧咄瑫r(shí)像右浮動(dòng)，第二個(gè)<div>就會(huì)更加地靠右。

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

清除浮動(dòng)

現(xiàn)在你已經(jīng)開(kāi)始看到有趣的花車。不過(guò),你很快就能夠碰到一個(gè)問(wèn)題——所有內(nèi)容在漂浮,如果不是處理看起來(lái)可怕。為了我們所說(shuō)低于的第三個(gè)環(huán)繞浮動(dòng)元素,嘗試添加以下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>

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

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

footer {
  clear: both;
}

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

清除 可以采用三個(gè)值：

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

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

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

浮動(dòng)問(wèn)題

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

整個(gè)寬度可能難以計(jì)算

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

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

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

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

* {
  box-sizing: border-box;
}

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

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

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

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

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

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

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

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

.clearfix {
  clear: both;
}

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

<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)在解決它。

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

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

浮動(dòng)項(xiàng)目的背景高度

到目前為止，我們建好的示例是有效的，但另一個(gè)問(wèn)題是列高度是不同的 - 如果列都是相同的高度，它看起來(lái)會(huì)更好。

我們可以通過(guò)給所有的列固定來(lái)解決這個(gè)問(wèn)題height (see 5_fixed-height-columns.html (源代碼):

.column {
  height: 550px;
}

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

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

你也可以考慮:

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

清除浮動(dòng)會(huì)變復(fù)雜

我們?cè)谖恼轮薪⒌暮?jiǎn)單例子很容易理解，但是當(dāng)布局變得更加復(fù)雜清理也會(huì)變得更加復(fù)雜。如果你沒(méi)有一個(gè)方便的容器在必要的地方使用clearfix divs將被清理。你需要確保任何浮動(dòng)的內(nèi)容盡快清除，以避免降低麻煩。

總結(jié)

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

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

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)