浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素「卡住」：
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
不幸的是，下乙個元素會受到這個浮動元素的影響。
為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。
這有助於減少或消除不必要的標記。
h1標籤是塊級元素，佔據了整行，span標籤是行內元素，只佔據內容這一部分
行內元素和塊級元素的區別：（非常重要）
行內元素：與其他行內元素併排；不能設定寬、高。預設的寬度，就是文字的寬度。
塊級元素：霸佔一行，不能與其他任何元素並列；能接受寬、高。如果不設定寬度，那麼寬度將預設變為父親的100%。
塊級元素變行級元素：display: inline;
行級元素變塊級元素：display:block
標準流裡面的限制非常多，導致很多頁面效果無法實現。如果我們現在就要併排、並且就要設定寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！
css中一共有三種手段，使乙個元素脫離標準文件流：
（1）浮動
（2）絕對定位
（3）固定定位
收縮：乙個浮動的元素，如果沒有設定width，那麼將自動收縮為內容的寬度（這點非常像行內元素）。
如果乙個元素要浮動，那麼它的祖先元素一定要有高度。
有高度的盒子，才能關住浮動。
浮動清除的總結
我們在上一段講了四種清除浮動的方法，本段來進行乙個總結。
浮動的元素，只能被有高度的盒子關住。 也就是說，如果盒子內部有浮動，這個盒子有高，那麼妥妥的，浮動不會互相影響。
1、加高法
工作上，我們絕對不會給所有的盒子加高度，這是因為麻煩，並且不能適應頁面的快速變化。
//設定height
//設定height
2、clear:both;法 最簡單的清除浮動的方法，就是給盒子增加clear:both；表示自己的內部元素，不受其他盒子的影響。
//clear:both;
浮動確實被清除了，不會互相影響了。但是有乙個問題，就是margin失效。兩個div之間，沒有任何的間隙了。 3、隔牆法 在兩部分浮動元素中間，建乙個牆。隔開兩部分浮動，讓後面的浮動元素，不去追前面的浮動元素。 牆用自己的身體當做了間隙。
我們發現，隔牆法好用，但是第乙個div，還是沒有高度。如果我們現在想讓第乙個div，自動根據自己的兒子撐出高度，我們就要想一些「小伎倆」。 內牆法：
內牆法的優點就是，不僅僅能夠讓後部分的p不去追前部分的p了，並且能把第乙個div撐出高度。這樣，這個div的背景、邊框就能夠根據p的高度來撐開了。
4、overflow:hidden;
這個屬性的本意，就是將所有溢位盒子的內容，隱藏掉。但是，我們發現這個東西能夠用於浮動的清除。
我們知道，乙個父親，不能被自己浮動的兒子撐出高度，但是，如果這個父親加上了overflow:hidden；那麼這個父親就能夠被浮動的兒子撐出高度了。這個現象，不能解釋，就是瀏覽器的偏方。
並且,overflow:hidden;能夠讓margin生效。
浮動和清除浮動
浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。浮動元素引起的問題 1 父元素的高度無法被撐開，影響與父元素同級的元素。2 與浮動元素同級的非浮動元素 ...
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會使父元素高度塌陷 為了實現文字環繞效果...