float 浮動
浮動元素脫離普通流，然後按照指定方向，向左或者向右移動，碰到父級邊界或者另外乙個浮動元素停止
值: left | right | none | inherit
初始值: none
應用於: 所有元素
繼承性: 無
浮動流正常流中元素乙個接乙個排列；浮動元素也構成浮動流
塊級框浮動元素自身會生成乙個塊級框，而不論這個元素本身是什麼，使浮動元素周圍的外邊距不會合併
包裹性浮動元素的包含塊是指其最近的塊級祖先元素，後代浮動元素不應該超出包含塊的上、左、右邊界。若不設定包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其所有後代浮動元素；若不設定包含塊的寬度，包含塊若浮動，則包含塊寬度由後代浮動元素撐開
破壞性浮動元素脫離正常流，並破壞了自身的行框屬性，使其包含塊元素的高度塌陷，使浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框重新排列
[1]浮動元素的左(或右)外邊界必須是源文件中之前出現的左浮動(或右浮動)元素的右(左)外邊界。除非後出現浮動元素的頂端在先出現浮動元素的底端下面
[2]左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊
[3]左(或右)浮動元素左邊(右邊)有另乙個浮動元素，前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)
[4]浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界
[5]乙個浮動元素的頂端不能比其父元素的內頂端更高。如果乙個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有乙個塊級父元素
[6]浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高
[7]如果源文件中乙個浮動元素之前出現另乙個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端要高
[8]浮動元素必須盡可能高地放置
[9]左浮動元素必須向左盡可能遠，右浮動元素則必須向右盡可能遠。位置越高，就會向右或向左浮動得越遠
浮動元素超出父元素邊界的方法有兩種：一種是浮動元素的寬度大於父元素的寬度，另一種就是設定負外邊距。如果浮動元素存在負外邊距，且浮動元素與正常流元素重疊
行內框與乙個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示
塊框與乙個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示
float浮動深入理解
1.float的原本作用 為了實現文字環繞 2.float的包裹性和破壞性 包裹性 收縮 堅挺 隔絕。bfc block formatting context 塊級格式化上下文 破壞性 會讓父元素高度塌陷 浮動的破壞性只是單純的為了實現文字的環繞效果而已 具有包裹性的其他小夥伴 dispaly in...
深入理解CSS清除浮動與clear屬性
相信作為一名前端工作人員，一定遇到過或是被問過清除浮動這一問題，一般我們會說 元素新增float屬性後，其父元素不會被撐開，解決這個問題的過程就稱為清除浮動。沒有問題，假如再深入問一點，為什麼新增float屬性之後會出現這樣的情況，有幾種清除浮動的方法。浮動的案例 父元素沒有被撐開 class co...
深入理解浮動定位 float
css網頁布局有兩種方式 一種是浮動式布局 另外一種是定位布局。這兩種方式的核心都脫離於文件流的控制。前提 文件流 document flow 對於乙個xhtml網頁，body元素下的任意元素，根據其前後順序，組成了乙個個上下關係，簡單說這就是文件流。瀏覽器根據這些元素的順序去顯示它們在網頁中的位置...