網頁布局的本質——用css來擺放盒子。用盒子進行排序
普通流（標準流）
浮動定位
標籤按照預設規定好的方式排列
塊級元素會獨佔一行，從上向下順序排列。常用元素有：div,hr,p,h1-h6,ul,ol,dl,form,table
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行。常用元素：span,a,i,em等
標準流是最基本的布局方式
實際開發中，乙個頁面基本包含了三種布局方式。
為什麼需要浮動？浮動可以改變元素標籤預設的排列方式。
網頁布局第一準則：多個塊級元素縱向排列找標準流，多個塊級元素橫向排列找浮動。
網頁布局第一準則：先設定盒子大小，再設定盒子浮動
float
left/right/none
浮動特性：
浮動的元素會脫離標準流。
浮動的元素會一行內顯示並且元素頂部對齊，浮動元素緊貼在一起，如果父級寬度裝不下這些盒子，多出的盒子會另起一行對齊。
浮動的元素會具有行內塊元素的特性，任何元素都可以浮動，新增浮動之後具有行內塊元素相似的特性
一、設定了浮動元素最重要特性：
脫離標準普通流的控制（浮）移動到指定位置（動），（俗稱脫標）
浮動的盒子不再保留原先的位置、
二、浮動元素經常和標準流父級搭配使用
為了約束浮動元素位置，網頁布局一般採取的策略是：
先用標準流父元素排列上下位置，之後內部子元素採取浮動排列左右位置。
顯示效果
理想中的狀態，讓子盒子撐開父元素，有多少子元素，父元素就多高
額外標籤法也稱為隔牆法。
在浮動元素的末尾新增乙個空標籤。此標籤必須為塊級元素。
預設值。內容不會被修剪，會呈現在元素框之外。
hidden
內容會被修剪，並且其餘內容是不可見的。
scroll
內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容。
auto
如果內容被修剪，則瀏覽器會顯示滾動條以便檢視其餘的內容。
CSS布局之浮動 清除浮動
1.2 浮動 float 小結 1.3 浮動 float 的應用 重要 1.4 浮動 float 的擴充套件 2.清除浮動 2.4 清除浮動總結 概念 元素的浮動是指設定了浮動屬性的元素會 脫離標準普通流的控制 移動到指定位置。作用 讓多個盒子 div 水平排列成一行，使得浮動成為布局的重要手段。可...
css浮動和清除浮動
css樣式的float浮動屬性，用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤等html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左 float left 和浮動居右靠右 float right 一般情況是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣cs...
CSS浮動和清除浮動
包裹性指的是元素尺寸剛好容納內容,表現得就像diaplay inline block一樣 具有包裹性的其他屬性 display inline block position absolute fixed sticky overflow hidden scroll會使父元素高度塌陷 為了實現文字環繞效果...