全文概要

1 網頁佈局

網頁佈局描述的是瀏覽器如何對網頁中元素進行排版的。目前前端佈局方案主要有三種：css

傳統佈局方案（標準流、浮動流、定位流）
flex佈局方案
grid佈局方案

2 標準流

2.1 理解

瀏覽器默認的排版方式，標準流又稱普通流。
標準流中元素會自動從左往右，從上往下的流式排列。
主要分爲兩個板塊，一個是塊級元素，一個是行內元素。
塊級元素獨佔一行，行內元素水平排列，直到佔滿一行而後換行。

2.2 元素的分類

從元素的佈局特性來分，主要能夠分爲三類元素：塊級元素、行內元素、行內塊元素。html

2.21 塊級元素

獨佔一行（width默認爲100%，height爲0）
寬高內外邊距都是能夠設置的
常見的塊級元素：div h1-h6 ul ol li dl dt dd form p

2.22 行內元素

寬高靠內容撐開，一行能夠放多個
不能設置寬高，就像橡皮筋包住字
常見的行內元素：span a b strong i em ins del u

2.23 行內塊元素

寬高靠內容撐開，一行能夠放多個
寬高內外邊距都是能夠設置的
常見的行內塊元素：Img input a

注：行內元素和行內塊水平排列時，兩兩之間會出現大約6px的空白間隙，這是因爲元素間空白字符（換行符、空格或製表符）致使。前端

3 浮動流

3.1 理解

半脫離標準流的排版方式
主要用來作網頁的橫向佈局
元素設置浮動後，設置寬高起做用，默認在當前包含塊左上一排，若是前邊有塊級元素，會排在元素的下面
浮動分爲左浮動：flaot:left和右浮動：float:right

3.2 特色

浮：加了浮動的元素盒子是浮起來的，漂浮在其餘標準盒子之上
漏：浮動的盒子原來的位置漏給了標準流盒子
特別注意：首先浮動的盒子須要和父級盒子搭配使用，其實，特別注意，浮動可使元素顯示模式體現爲行內塊特性

3.3 排列方式

3.31 第一個盒子浮動

<head>
<meta charset="utf-8">
<title>第一個盒子浮動-分狀況</title>
<style> .son1{ width: 200px; height: 100px; background-color: pink; float:left; } .son2{ width: 200px; height: 100px; background-color: aquamarine; } </style>
</head>
<body>
    <div class="son1"></div>
    <div class="son2"></div>
</body>
複製代碼

兩個盒子寬高同樣，第一個盒子浮動，只能看到第一個

兩個盒子寬高不同，第一個盒子浮動，第一個盒子寬高>第二個盒子，只能看到第一個盒子

第二個盒子寬高>第一個盒子，能夠看到第二個盒子溢出的部分

3.32 第二個盒子浮動

第一個盒子獨佔一行，第二個盒子獨佔一行瀏覽器

<head>
    <meta charset="utf-8">
    <title>第二個盒子浮動</title>
    <style> .son1{ width: 200px; height: 200px; background-color: pink; } .son2{ width: 100px; height: 100px; background-color: aquamarine; float:left; } </style>
</head>
<body>
    <div class="son1"></div>
    <div class="son2"></div>
</body>
複製代碼

4 清除浮動

4.1 爲何要清除浮動？

若是son1和son2浮動了，浮動元素不佔有位置，父親沒有高度，此時後面的元素就會跑上來。markdown

4.2 本質

清除浮動主要是爲了解決父級元素由於子級浮動引發的內部高度爲0的問題。
清除浮動就是把浮動盒子圈到裏面，讓父盒子閉合出口，不讓他們出來影響其餘元素。
本質：閉合浮動

4.3 清除浮動方法

4.31 僞元素清除浮動

給全部浮動元素的父級一個clearFix的類名當一個元素須要清除浮動的時候直接設置clearFix類名便可佈局

表明網站：百度、淘寶、網易等flex

.clearFix::after{
    content:"";  /*必須擁有content屬性 內容爲空*/
    display: block; /*必須塊標籤才能清浮動 */
    clear: both; /*清除浮動*/
    height: 0;/*高度爲0 不佔用空間*/
}
/*兼容ie*/
.clearFix{  
    *zoom:1; 
}
複製代碼

4.32 雙僞元素清除浮動

表明網站：小米、騰訊網站

.clearfix::before,
.clearfix::after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
/* ie6 7 專門清除浮動的樣式*/
.clearfix {
	*zoom:1;
}
複製代碼

優勢：符合語義化結構
弊端：寫法複雜，須要兼容ie

clear 屬性清除浮動的原理是什麼？設置元素禁止浮動元素出如今它的左側、右側甚至是雙側spa

4.33 給父級設置overflow：hidden

優勢：寫法簡單，兼容性好
弊端：裏面的內容或者元素超出父元素就會隱藏

4.34 浮動元素末尾加一個空標籤

優勢：寫法簡單，兼容性好
弊端：增長結構負擔，代碼冗餘

兩種不須要清除浮動狀況：code

父盒子自己有高度
父盒子自己有float屬性（父元素BFC）

5 定位流

浮動是多個塊級元素在同一行顯示，定位主要是有層疊的概念。

5.1 定位的應用場景

輪播圖
點擊隱藏效果的二維碼
版心以外廣告
下拉菜單

5.2 分類

5.21 相對定位

佔位定位 不脫標
參考點：自身位置

經常使用於浮動元素上，用於調節佔位浮動溢出父盒子，調節浮動後上下的一兩像素。

5.22 絕對定位

徹底脫標不佔位
參考點：離本身最近設置了（絕對定位、相對定位、固定定位）的父元素
父元素無定位，默認參考點初始包含塊
行內元素設置了固定定位和絕對定位，會轉爲塊

初始包含塊 —— 是瀏覽器廠商提供，與視口等高等寬的透明矩形，可是不是視口，從視覺的角度上來能夠理解爲瀏覽器第一屏四個角。

5.23 固定定位

參考點永遠是瀏覽器窗口
徹底脫標不佔位

5.3 定位的層級

定位層級是由父元素決定的，層級相同，後寫的父元素連同子元素會壓在先寫的元素以及子元素上面
當父元素不設置層級時，子元素的高低將決定自身是否壓倒其餘元素和子元素。

結語

本篇文章就到此爲止啦，因爲本人經驗水平有限，不免會有紕漏，對此歡迎指正。如以爲本文對你有幫助的話，歡迎點贊❤❤❤，寫做不易，持續輸出的背後是無數個日夜的積累，您的點贊是持續寫做的動力，感謝支持！

【CSS】細說網頁佈局中的標準流、浮動流與定位流