css的布局有三種機制 ，一是標準流，即普通流，所有的元素都屬於標準流；二是定位流，三則是定位流
浮動流組最開始是用來實現**混排的效果，因為浮動元素壓不住文字。我們如果只使用標準流來布局，很多效果是無法實現或者說實現起來比較麻煩，比如我們想多個元素拍成一行，又希望這一行的元素之間沒有間隙且可以設定寬高，如果只用標準流來實現無疑是比較麻煩的，但是浮動就可以很容易的實現
"father"
>
"son"
>
"son1"
>
"son2"
>
"son3"
>
.father
.son,
.son1,
.son2,
.son3
.son
.son1
.son2
.son3
元素浮動之後，就會脫離標準流。關於這一點可以理解成標準流中的盒子都是沉在水底的，如果乙個元素浮動，後面的標準流的元素就會佔據那個浮動元素在浮動之前的標準流的位置，這也是為什麼兩個相鄰元素，前乙個浮動，就會覆蓋後面那個元素的原因
浮動元素的特點
脫離標準流
無法撐起父級元素的高度
浮動之後margin：0 auto不起作用
可以設定寬高以及內外邊距
清除浮動
但是浮動也帶來了一些不太好的後果，比如父元素未設定高度，其子元素浮動之後，不同於標準流，浮動後元素是撐不起父元素的高度的，此時我們就需要清除浮動，下面來介紹一些比較常見的方法
定高法顧名思義，既然浮動後子元素撐不起子元素高度，那就直接給父元素設定乙個固定高就好了，但是很顯然，這樣是不實用的
新增子元素法
給父盒子末尾新增乙個空的子元素，然後給這個元素設定clear屬性
clear有三個屬性值，分別是left（清除左側浮動，不允許左側有浮動元素），right（清除右側浮動），both（同時清除兩側的浮動）。我們在使用時直接用clear：both就可以了
.father
.clearfix
.son,
.son1
.son
.son1
此時父級元素就可以自動獲取到浮動元素的高度
多說一句，雖然這樣可以實現清除浮動影響的效果，但是每一次都要去加乙個元素，未免有些麻煩，所以又提出了一種偽元素解決辦法
偽元素清除法
其實本質上就是新增子元素法的公升級版，直接用**來介紹
"father clearfix"
>
"son"
>
"son1"
>
.father
.clearfix:after
.son,
.son1
.son
.son1
"father clearfix"
>
"son"
>
"son1"
>
.father
.clearfix:after，
.clearfix:before
.clearfix:after，
.clearfix
'''''省略子元素的樣式設定
使用方法：
這幾種使用方法都能實現清除浮動影響的效果，且父元素需要設定寬度，不要設定高度。第一種的弊端是元素過多時，不會自動換行，會隱藏掉可能需要顯示的元素。而後兩者則是會出現滾動條，如果不介意出現滾動條也可以使用。
父元素浮動法
為了讓子元素撐得起父元素高度，可以讓父元素也浮動，但是顯然這樣又要繼續解決清除浮動的問題，得不償失。
dispaly：table
css的浮動以及清除浮動的方法
內聯元素可以分為替換元素和非替換元素 替換元素 非替換元素 內聯元素設定padding 內聯元素一樣可以設定padding 左右方向的padding會生效,也會達到預期的效果 上下方向的padding會生效,但是不會影響布局,就是說設定上了,但是元素不會有任何移動之類的.內聯元素設定border 設...
CSS浮動以及清除浮動
傳統網頁布局的三種方式 本質 用css擺放盒子。實際開發中，乙個頁面基本都包含了這三種布局方式 1 普通流 標準流 文件流 最基本的布局方式 標籤按照規定好預設方式排列 浮動 float屬性用於建立浮動框，將其移動到一邊知道左邊緣或右邊緣觸及包含塊或另乙個浮動框的邊緣。要想塊元素水平排列如果轉換成行...
浮動以及清除浮動 BFC CSS
float屬性指定乙個元素應沿其容器的左側或者右側放置，允許文字和內聯元素環繞它。浮動定位常用於布局中。浮動的特點 脫標 脫離標準流 貼邊 會貼向父容器或其他浮動的側邊 字圍 文字和內聯元素會環繞浮動元素 即float的屬性值不為none的值 收縮 塊級元素不再沾滿一整行，而是收縮至元素本身的寬度 ...