浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文件普通流的塊框上。

浮動元素引起的問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素。

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後。

（3）若非第乙個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構。

解決方法：

使用css中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，新增如下樣式，給父元素新增clearfix樣式：

.clearfix:after

.clearfix /* for ie/mac */

清除浮動的幾種方法：

（1）父級div定義height。

（2）額外標籤法，

（缺點：不過這個辦法會增加額外的標籤使html結構看起來不夠簡潔。）

（3）使用after偽類

#parent:after

（4）父級div也浮動，需要定義寬度。

（5）父級div定義display:table。

（6）設定overflow為hidden或者auto。

position:absolute和float屬性的異同

共同點：對內聯元素設定float和absolute屬性，可以讓元素脫離文件流，並且可以設定其寬高。

不同點：float仍會佔據位置，absolute會覆蓋文件流中的其他元素。

浮動和清除浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被...

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會使父元素高度塌陷 為了實現文字環繞效果...