對於浮動和BFC的理解

2022-09-10 10:51:13 字數 708 閱讀 1894

浮動屬性產生之初是為了實現「文字環繞」的效果,讓文字環繞在網頁實現類似word中「**混排」。

如果給元素設定float: left | right 會導致該元素脫離文件流。像設定的方向靠近。

如何父元素沒有設定高度,而所有的子元素都設定了浮動,會導致父元素的高度塌陷為0

以前對bfc一直很模糊的概覽。bfc(block formatting context)是塊級格式上下文的簡寫相對的還有個ifc(inline formatting context)行級格式上下文

float的值不是none。

position的值不是static或者relative。

display的值是inline-block、table-cell、flex、table-caption或者inline-flex

overflow的值不是visible

bfc就是頁面上的乙個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。反之也如此。

因為bfc內部的元素和外部的元素絕對不會互相影響,因此, 當bfc外部存在浮動時

它不應該影響bfc內部box的布局,bfc會通過變窄,而不與浮動有重疊。同樣的,當bfc內部有浮動時,

為了不影響外部元素的布局,bfc計算高度時會包括浮動的高度。避免margin重疊也是這樣的乙個道理。

參考

BFC和浮動元素

block format context 如何觸發乙個盒子的bfc 用以下方式 position absolute display inline block float left right overflow hidden right.left加入bfc解決 margin left 100px ma...

CSS 浮動,高度塌陷和BFC,清除浮動

通過浮動,可以使乙個元素向其父元素的左側或右側移動,使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流,不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時,不會超過...

BFC和清浮動問題

bfc block formatting context 塊級格式化上下文,是乙個獨立的渲染區域,讓處於 bfc 內部的元素與外部的元素相互隔離,使內外元素的定位不會相互影響。在ie下,layout,可通過zoom 1觸發 浮動的元素會被父級計算高度 父級元素觸發了bfc 非浮動元素不會覆蓋浮動元素...