css布局中說到定位就不得不提浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動
框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
一float屬性的定義和用法
float屬性：設定元素浮動
可能的值：
none 不浮動，在文件流內，預設
left 左浮動，脫離文件流
right 右浮動，脫離文件流
inherit 規定應該從父元素繼承 float屬性的值。
float屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在css中，任何
元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確
的寬度；否則，它們會盡可能地窄。假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這
個過程會持續到某一行擁有足夠的空間為止。
我們用圖示和例項來理解元素的浮動：
(1)三個不浮動元素的圖示和效果：
區域1區域2
區域3當沒有設定元素浮動的時候，由於我們使用的是div元素是塊級元素，我們看到三個元素依次排列到元素的下面，
而不會是接著元素排列。
(2)第乙個元素向左浮動的圖示和效果：
改寫第乙個元素向左浮動的**：
#div_1
當元素1向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件
流中，所以它不佔據空間，實際上覆蓋住了元素2，使元素2從檢視中消失。
(3)第乙個元素向右浮動的圖示和效果：
改寫第乙個元素向右浮動的**：
#div_1
當把元素1向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣。
(4)設定三個元素均向左浮動的圖示和效果：
改寫三個元素都向左浮動的**：
#div_1
#div_2
#div_3
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直碰到前乙個浮動框。
(5)如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間：
區域1區域2
區域3(6)如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
改寫第乙個元素的高度的**：
#div_1
那麼我們會在第二個例項中看到浮動元素遮住了文件流的區域，那麼我們怎麼做，才能看到元素2的內容呢？下
面我們就來解決這個問題：使用clear屬性。
二clear屬性
浮動清除的定義和用法
clear屬性規定元素的哪一側不允許其他浮動元素。在css1和css2中，這是通過自動為清除元素（即設定了
clear屬性的元素）增加上外邊距實現的。在css2.1中，會在元素上外邊距之上增加清除空間，而外邊距本身並不改
變。不論哪一種改變，最終結果都一樣，如果宣告為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元
素的下外邊距邊界之下。
可能的值
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 預設值。允許浮動元素出現在兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。
我們用圖示和例項來理解元素的清除浮動：
例項：先回過頭來看例項(2)的效果，我們設定第二個元素有清除浮動元素屬性：
#div_2
三浮動和清除浮動的結合
我們先來看個例子：
歡迎訪問某某**
區域1區域2
區域3這是一些文字內容
我們從結果中看出浮動的元素並沒有融入到我們編輯的整個文件流中，從布局來看，文字內容應該緊接著區域塊
的內容向下另起一行排列，但是並沒有達到預期的效果。
如何讓浮動元素融入到整個文件流布局中？
結合實際我們找到了乙個可行的方法，在浮動元素的區域塊中再新增乙個div，設定這個div為清除浮動屬性，這
樣浮動元素就真實存在文件流中。
區域1區域2
區域3
這是一些文字內容
看一下效果：
CSS基礎之布局模型
12 css布局模型 css包含3種基本的布局模型，用英文概括為 flow layer 和 float。在網頁中，元素有三種布局模型 1 流動模型 flow 2 浮動模型 float 3 層模型 layer 流動模型 先來說一說流動模型，流動 flow 是預設的網頁布局模式。也就是說網頁在預設狀態下...
CSS基礎布局
一 瀏覽器如何解析css 三種引用樣式表 1 嵌入式 2 style標籤 3 外部css檔案 二 盒模型 html中每乙個塊元素基本上都可以看成乙個盒子，這個盒子的寬和高，外加內邊距 邊框粗細和外邊距這些東西，決定了元素的尺寸。如果定義了乙個寬50畫素的盒模型，padding 2px，border ...
css基礎 布局
背景設定 屬性作用 background size 背景圖的大小，cover,contain background repeat 平鋪background position 背景的位置 background origin 對齊方式 object fit 可以使適應背景的大小 box sizing 在...