浮動定位BFC邊距合并

1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響?

浮動元素不在文檔的普通流中,它可以根據float屬性值而左右移動,直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣才停止移動。

對父容器的影響:如果父容器的子元素都是浮動元素,那么父容器會失去高度,在浮動元素之外。視覺上,父容器沒有包含住浮動的子元素。

其它浮動元素的影響:如果包含塊太窄無法容納水平排列的全部浮動元素,那么其它浮動元素會向下移動,直到有足夠的空間,而如果浮動元素的高度不同,那么向下移動的時候可能會被卡住。

普通元素的影響:普通元素會視浮動元素不見,占據浮動元素原有的位置,但會被浮動元素遮罩。

對文字的影響:文字會感知到浮動元素的存在,會留出空間,形成環繞效果。


2. 清除浮動指什么? 如何清除浮動? 兩種以上方法

清除浮動是指結合clear屬性讓父元素在視覺上包圍浮動元素。清除浮動的方法:

(1) 在父元素的子元素最后添加一個空div,并對其設置樣式:clear:both;

由于在子元素最后添加了空div,并清除了浮動,因此父容器被撐開,實現了在視覺上包圍浮動元素的效果。

(2) 利用BFC來清除浮動。

因為BFC可以包含浮動,因此可以讓父元素生成一個新的BFC從而包圍浮動的子元素。

可以對父元素設定以下樣式之一生成新BFC。

float: left | right;

overflow: hidden | auto | scroll;

display: table-cell | table-caption | inline-block;

position: absolute | fixed;

(3)結合CSS特性的通用清除浮動方案,其本質還是第1種方法

.clearfix{*zoom: 1;}(ie67)

.clearfix:after{content: ””; display: block; clear: both;}

6. BFC 是什么?如何生成 BFC?BFC 有什么作用?舉例說明

BFC是塊級格式上下文。其定義是:浮動、絕對定位(絕對定位、固定定位)元素、塊級容器(如inline-block、 table-cell、table-caption)并不是塊級盒子,還包括哪些overflow屬性值取值visible以外的塊級盒子,會為它們的內容物創建一個新的塊級格式化上下文。對元素設置以下屬性就可以生成BFC:

float: left | right;

overflow: hidden | auto | scroll;

display: table-cell | table-caption | inline-block;

position: absolute | fixed;

BFC的作用有:


BFC會阻止垂直外邊距(margin-top、margin-bottom)折疊

按照BFC的定義,只有同屬于一個BFC時,兩個元素才有可能發生垂直Margin的重疊,這個包括相鄰元素,嵌套元素,只要他們之間沒有阻擋(例如邊框,非空內容,padding等)就會發生margin重疊。

因此要解決margin重疊問題,只要讓它們不在同一個BFC就行了,但是對于兩個相鄰元素來說,意義不大,沒有必要給它們加個外殼,但是對于嵌套元素來說就很有必要了,只要把父元素設為BFC就可以了。這樣子元素的margin就不會和父元素的margin發生重疊

BFC不會重疊浮動元素

BFC可以包含浮動

我們可以利用BFC的第三條特性來“清浮動”,這里其實說清浮動已經不再合適,應該說包含浮動。也就是說只要父容器形成BFC就可以,簡單看看如何形成BFC

float為 left|right

overflow為 hidden|auto|scroll

display為 table-cell|table-caption|inline-block

position為 absolute|fixed

我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果


通用的清理浮動法案

/*方法1*/.clearfix{? ? ? *zoom:1;? }.clearfix:after{content:"";display:block;clear:left;? }/*方法2*/.clearfix{? ? *zoom:1;? }.clearfix:after{content:"";display:table;clear:both;? }

兩種方案

雖然我們得出了一種瀏覽器兼容的靠譜解決方案,但這并不代表我們一定得用這種方式,很多時候我們的父容器本身需要position:absolute等形成了BFC的時候我們可以直接利用這些屬性了,大家要掌握原理,活學活用。總而言之清理浮動兩種方式

利用 clear屬性,清除浮動

使父容器形成BFC

局限性

使用BFC使用float的時候會使父容器長度縮短,而且還有個重要缺陷——父容器float解決了其塌陷問題,那么父容器的父容器怎么辦?overflow屬性會影響滾動條和絕對定位的元素;position會改變元素的定位方式,這是我們不希望的,display這幾種方式依然沒有解決低版本IE問題

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • relative:生成相對定位的元素,通過top,bottom,left,right的位置相對于其正常位置進行定位...
    zx9426閱讀 965評論 0 2
  • 1. 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素的特征:CSS設計flo...
    饑人谷_邵征鵬閱讀 580評論 0 0
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 浮動元素不在文檔的普通流中,它可以...
    yuhuan121閱讀 483評論 0 0
  • 1.浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響? 任何定義為float的元素,都可以...
    QQQQQCY閱讀 273評論 0 0
  • 不知怎么過就到了今天,本以為會有很多話去說,去總結,可是感覺自己還是太詞窮。20歲了,告別了我的花季雨季,...
    汪飄飄閱讀 186評論 0 0