IT工程師數位筆記本

前面的話

　　浮動最早的使用是出自<img src="#" align="right">，用于文本環繞圖片的排版處理。如今浮動作為CSS中常用的布局方式，本文將就浮動內容做詳細介紹和梳理

定義

float 浮動　

　　浮動元素脫離普通流，然后按照指定方向，向左或者向右移動，碰到父級邊界或者另外一個浮動元素停止

　　值: left | right | none | inherit

　　初始值: none

　　應用于: 所有元素

　　繼承性: 無

特性

　　【1】浮動流

　　正常流中元素一個接一個排列；浮動元素也構成浮動流

　　【2】塊級框

　　浮動元素自身會生成一個塊級框，而不論這個元素本身是什么，使浮動元素周圍的外邊距不會合并

　　【3】包裹性

　　浮動元素的包含塊是指其最近的塊級祖先元素，后代浮動元素不應該超出包含塊的上、左、右邊界。若不設置包含塊的高度，包含塊若浮動，則包含塊會延伸，進而包含其所有后代浮動元素；若不設置包含塊的寬度，包含塊若浮動，則包含塊寬度由后代浮動元素撐開

　　【4】破壞性

　　浮動元素脫離正常流，并破壞了自身的行框屬性，使其包含塊元素的高度塌陷，使浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框重新排列

表現

　　[1]浮動元素的左(或右)外邊界必須是源文檔中之前出現的左浮動(或右浮動)元素的右(左)外邊界。除非后出現浮動元素的頂端在先出現浮動元素的底端下面

　　[2]左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。右浮動元素的左外邊界也不會在其左邊任何左浮動元素的右外邊界的左邊

　　[3]左(或右)浮動元素左邊(右邊)有另一個浮動元素，前者右外邊界不能在其包含塊右(左)邊界的右邊(左邊)

　　[4]浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界

　　[5]一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合并外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素

　　[6]浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高

　　[7]如果源文檔中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端要高

　　[8]浮動元素必須盡可能高地放置

　　[9]左浮動元素必須向左盡可能遠，右浮動元素則必須向右盡可能遠。位置越高，就會向右或向左浮動得越遠

重疊

　　浮動元素超出父元素邊界的方法有兩種：一種是浮動元素的寬度大于父元素的寬度，另一種就是設置負外邊距。如果浮動元素存在負外邊距，且浮動元素與正常流元素重疊

　　【1】行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素之上顯示

　　【2】塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素之下顯示，而內容在浮動元素之上顯示