資訊專欄INFORMATION COLUMN
摘要：深入布局定位與浮動(dòng)在知識(shí)體系中，除了選擇器，樣式屬性等基礎(chǔ)知識(shí)外，布局相關(guān)的知識(shí)才是比較核心和重要的點(diǎn)。定位后，原來(lái)在文檔流中占據(jù)的位置，會(huì)被其他元素所占據(jù)。清除浮動(dòng)的特殊應(yīng)用清除浮動(dòng)可以解決父元素高度塌陷問(wèn)題。
?
?
????
在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。
?
上篇文章我們講完了css布局中盒模型和元素分類的相關(guān)知識(shí)，同時(shí)介紹了box-sizing和行框。這篇我們繼續(xù)...
?
?
上篇我們講解了不同類型元素的特點(diǎn)，我們可以隨意的排列組合他們來(lái)達(dá)到我們想要的效果。但是他們都是基于一個(gè)二維平面的，如果我們想在布局中有遮擋，重疊之類的更豐富效果，我們就需要使用到定位和浮動(dòng)的相關(guān)知識(shí)。
1.1 文檔流
文檔流就是按照頁(yè)面元素書(shū)寫的順序，將頁(yè)面元素按從左到右，從上至下的一般順序進(jìn)行排列。那么也就可以理解成我們剛才所說(shuō)的一個(gè)二維平面的概念。
那么如果我想要實(shí)現(xiàn)更豐富的效果，就需要脫離文檔流，在一個(gè)新的平面上去顯示，這樣我們就可以在屏幕上有多個(gè)平面疊加顯示的效果了，那么這就是浮動(dòng)和定位的工作了。
1.2 定位
定位允許你使用 position 屬性，將一個(gè)元素相對(duì)于他自己或者他的祖先元素甚至是瀏覽器窗口通過(guò) top , left , right , bottom 屬性進(jìn)行偏移。
根據(jù) position 屬性的取值，元素可以分為靜態(tài)定位元素static（默認(rèn)值）、相對(duì)定位元素relative、絕對(duì)定位元素absoute和固定定位元素fixed。
首先我們拋開(kāi)static這個(gè)默認(rèn)值，因?yàn)樗静粚儆诙ㄎ坏姆懂?，因?yàn)樵啬J(rèn)就是static，他就相當(dāng)于是依據(jù)文檔流顯示。
當(dāng)我們使用定位時(shí)，需要position屬性和top,left,right,bottom這兩類屬性共同參與來(lái)決定一個(gè)元素的 定位類型 和 偏移量 。
使用方法很簡(jiǎn)單，這里說(shuō)下他們之間的區(qū)別:
- relative相對(duì)定位
- 元素根據(jù)其在當(dāng)前文檔流所在位置作為參考系，進(jìn)行偏移。
- 定位之后原來(lái)元素在文檔流中的位置會(huì)被空出來(lái)，不會(huì)被其他元素所占據(jù)。
- absolute絕對(duì)定位
- 元素會(huì)將其帶有position為非static的祖先元素作為參考系進(jìn)行偏移。
- 如果祖先元素里沒(méi)有帶有position為非static的，則會(huì)以首屏作為參考系。
- 定位后，原來(lái)在文檔流中占據(jù)的位置，會(huì)被其他元素所占據(jù)。
- fixed固定定位
- 根據(jù)當(dāng)前可視區(qū)進(jìn)行定位，所以當(dāng)文檔流為多屏可滾動(dòng)時(shí)，fixed定位的元素會(huì)跟隨滾動(dòng)而滾動(dòng)。
- 跟absolute定位一樣，定位后，原來(lái)在文檔流中占據(jù)的位置，會(huì)被其他元素所占據(jù)。
1.3 包含塊
包含塊就是個(gè)專有名詞，其實(shí)概念很簡(jiǎn)單，這里了解一下就好。
包含塊是一個(gè)矩形區(qū)域，當(dāng)元素設(shè)置屬性的百分比的時(shí)候，比如width：50% 或者 top: 10%，其參考系就是他的包含塊。
- 大部分時(shí)候?qū)τ谖臋n流里的元素，其包含塊指的都是其父元素的區(qū)域。
- 對(duì)于定位元素來(lái)說(shuō)，相對(duì)定位元素包含塊也是其父元素區(qū)域；
- 絕對(duì)定位元素的包含塊是其帶有position為非static的祖先元素區(qū)域。如果其沒(méi)有這樣的祖先元素的話其包含塊為首屏顯示區(qū)域，這個(gè)區(qū)域也有個(gè)專有名詞叫做
初級(jí)包含塊。- 固定定位元素的包含塊就是當(dāng)前可視區(qū)的區(qū)域。
1.4 浮動(dòng)
浮動(dòng)允許你將元素浮動(dòng)起來(lái)，脫離文檔流向左或者向右移動(dòng)。直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/code>
雖然浮動(dòng)也脫離文檔流顯示，但是與定位不同的是 inline 和 inline-block 的元素可以識(shí)別這種因浮動(dòng)而脫離的文檔流，從而不發(fā)生重疊。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
* {
margin: 0;
padding: 0;
}
.float {
width: 40px;
height: 40px;
background: blue;
float: left;
}
p{
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
style>
head>
<body>
<div class="float">div>
<p>LearnInPro LearnInPro LearnInProp>
body>
html>
?
我們會(huì)發(fā)現(xiàn)p元素并沒(méi)有占據(jù)掉浮動(dòng)元素的位置，然后我們將上面的代碼稍作修改，將p元素的display改為block我們就會(huì)發(fā)現(xiàn)
?
雖然這樣p標(biāo)簽占據(jù)了float元素的位置，但是標(biāo)簽里面的文本則不會(huì)去占據(jù)float元素的位置。
這個(gè)設(shè)定其實(shí)是有些詭異的。另外說(shuō)一句，在css歷史上浮動(dòng)這個(gè)東西一開(kāi)始被造出來(lái)是為了實(shí)現(xiàn)文字圍繞圖片這種效果的而不是用來(lái)做布局的，當(dāng)時(shí)只有圖片可以設(shè)置浮動(dòng)效果，但是后來(lái)慢慢所有元素都可以浮動(dòng)并且基于浮動(dòng)有了自己的布局體系，所有由于歷史原因相對(duì)來(lái)說(shuō)浮動(dòng)的規(guī)則是比較亂的小部分還有些詭異的。有些地方我們記住就好。
我們來(lái)具體看下浮動(dòng)的規(guī)則：浮動(dòng)元素會(huì)從最后一行最左側(cè)的空白位置開(kāi)始浮動(dòng)，如當(dāng)前行無(wú)法容納下自己寬度，則垂直下沉到下一行，向左或者向右碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?。我們這里舉兩個(gè)例子：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
.float{
width: 30%;
height: 40px;
border: 1px solid black;
float: left;
}
style>
head>
<body>
<div class="float">flaot1div>
<div class="float" style="height: 60px;">flaot2div>
<div class="float">flaot3div>
<div class="float">flaot4div>
body>
html>
這里float4在float3右側(cè)空白位置起始，發(fā)現(xiàn)當(dāng)前行無(wú)法容納下自己則垂直向下到下一行，向左移動(dòng)，在碰到包含塊之前，碰到了float2的邊框，于是就會(huì)在float2的右邊框處停止浮動(dòng)。
之后我們將代碼稍作修改，把float5這行注釋刪掉，我們會(huì)發(fā)現(xiàn)，一開(kāi)始float5的起始位置就是在float4這行的右側(cè)空白區(qū)域，當(dāng)前行可容納下自己，于是就停在了float4的右側(cè)。雖然第一行也就是float3這行右側(cè)空白區(qū)域也空著，可以放得下float5，但是float5的起始位置并不會(huì)在第一行，所以最終即使第一行有位置可以顯示下float5，它也不會(huì)在那里顯示。
?
1.4 清除浮動(dòng)
首先為啥要清除浮動(dòng)？
由于浮動(dòng)元素會(huì)脫離文檔流顯示，所以在浮動(dòng)元素后面的塊級(jí)元素會(huì)默認(rèn)占據(jù)這些元素的位置，就會(huì)造成這些塊級(jí)元素會(huì)在浮動(dòng)元素的下層顯示，出現(xiàn)浮動(dòng)元素蓋住后面正常文檔流元素的效果，但這往往不是我們想要的結(jié)果。
其作用是改變 使用清除浮動(dòng)的這個(gè)元素 與 前一個(gè)聲明的浮動(dòng)元素 之間的默認(rèn)布局規(guī)則，讓 使用清除浮動(dòng)的這個(gè)元素 在新的一行中顯示。
如何清除浮動(dòng)
clear屬性，其值為left | right | both。
浮動(dòng)元素或者非浮動(dòng)元素的塊級(jí)元素都可以使用這個(gè)屬性來(lái)清除浮動(dòng)（我們之前說(shuō)inline和inline-block元素可以自動(dòng)識(shí)別浮動(dòng)，所以他們不需要清除浮動(dòng)）， 他們的作用對(duì)象是前一個(gè)聲明的浮動(dòng)元素。如果使用 clear:left | right 則是清除前一個(gè)float為left或者right的元素的浮動(dòng)，clear：both則是清除前一個(gè)浮動(dòng)元素，無(wú)論它是向哪邊移動(dòng)。那么使用clear屬性的元素會(huì)在浮動(dòng)元素的下方新開(kāi)一行顯示。
清除浮動(dòng)的特殊應(yīng)用
清除浮動(dòng)可以解決父元素高度塌陷問(wèn)題。當(dāng)一個(gè)元素包裹了一些float元素的時(shí)候，由于float元素脫離文檔流顯示，所以父元素?zé)o法被這些元素?fù)伍_(kāi)高度，導(dǎo)致父元素高度為0。
那么最常用的一種解決方案是：設(shè)置父元素的after偽元素的clear屬性 來(lái)讓其撐開(kāi)父元素的高度。
Document
float
- 當(dāng)我們沒(méi)有設(shè)置clearfix的after偽元素時(shí)，會(huì)發(fā)現(xiàn)clearfix的高度為0，只有邊框會(huì)顯示出來(lái)。我們通過(guò)設(shè)置clearfix的after偽元素來(lái)讓我們?cè)诓恍枰略鰳?biāo)簽的情況下就可以清除掉浮動(dòng)，并且clearfix類還可以復(fù)用。
- 注意點(diǎn)：
- content和display屬性會(huì)將after偽元素渲染出來(lái)，加上clear: both實(shí)現(xiàn)一個(gè)真實(shí)標(biāo)簽清除浮動(dòng)的效果。
- 在一般瀏覽器中不設(shè)置visibility和height是沒(méi)有問(wèn)題的，但為了增加代碼健壯性和規(guī)范性，建議加上。
- :after 和 ::after的區(qū)別：:after的寫法是css2的，可以兼容到IE8，::after的寫法是css3中規(guī)定的，用以區(qū)分偽類(:hover)和偽元素(::before)。
定位與浮動(dòng)的相關(guān)知識(shí)點(diǎn)就講的差不多了，下篇文章會(huì)去講下merge的一些問(wèn)題 和 格式化上下文(formatting context) ， 繼續(xù)把css布局篇完成。
??
最后你覺(jué)得我們的文章對(duì)你有幫助，歡迎關(guān)注我們的 微信公眾號(hào)LearnInPro，在上面你可以第一時(shí)間獲取到我們的技術(shù)文章，并且你可以隨時(shí)在上面向我們提問(wèn)，把你在學(xué)習(xí)前端過(guò)程中所遇到的問(wèn)題發(fā)給我們。我們每天都會(huì)按時(shí)回復(fù)大家的每一個(gè)問(wèn)題，希望
LearnInPro可以伴隨你從入門到專家。
?
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2244.html
摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...
摘要：為了實(shí)現(xiàn)文字環(huán)繞效果，規(guī)范規(guī)定的措施是使父容器塌陷，元素脫離文檔流浮動(dòng)產(chǎn)生，元素周圍的內(nèi)容轉(zhuǎn)換為圍繞元素排列。 選擇器注意點(diǎn) 屬性選擇器 [attr^=value] - 開(kāi)頭或全等 [attr$=value] - 結(jié)尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 選擇器組 A > B - 直接子節(jié)點(diǎn) A + B - 下一個(gè)兄弟節(jié)點(diǎn) A...
? 深入css布局(3) — margin問(wèn)題與格式化上下文 ? ???? 在css知識(shí)體系中，除了css選擇器，樣式屬性等基礎(chǔ)知識(shí)外，css布局相關(guān)的知識(shí)才是css比較核心和重要的點(diǎn)。今天我們來(lái)深入學(xué)習(xí)一下css布局相關(guān)的知識(shí)。 ? css布局篇已經(jīng)講個(gè)2篇了，前面我們深入講解了 盒模型與box-sizing, 元素分類，行框，定位與浮動(dòng)等知識(shí)點(diǎn)。今天呢，我們把css布局篇做一個(gè)結(jié)尾，最后...
摘要：中有個(gè)重要的概念，搞懂可以讓我們理解中某些原本詭異的地方。簡(jiǎn)介在解釋之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位流浮動(dòng)流普通流三種。使用包含浮動(dòng)元素注意，這里觸發(fā)并不能阻止其它形式的脫離文檔流的元素覆蓋正常流元素。 CSS中有個(gè)重要的概念BFC，搞懂BFC可以讓我們理解CSS中某些原本詭異(??)的地方。 1. 簡(jiǎn)介 在解釋BFC之前，先說(shuō)一下文檔流。我們常說(shuō)的文檔流其實(shí)分為定位...
摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...
閱讀 1020·2021-11-25 09:43
閱讀 1679·2019-08-30 13:59
閱讀 1612·2019-08-30 11:22
閱讀 2137·2019-08-30 11:06
閱讀 1308·2019-08-28 17:51
閱讀 3744·2019-08-26 12:12
閱讀 790·2019-08-26 12:11
閱讀 456·2019-08-26 12:10
