BFC的作用和方法(兩欄自適應案例)

2021-10-25 02:37:09 字數 715 閱讀 7168

display: flow-root;overflow: hidden;

使 bfc 內部的浮動元素不會到處亂跑案例:

border: 3px solid red;

min-height: 20px;

display: flow-root;

}.in

兩欄自適應(產生邊界案例):

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容內容

bfs詳解:

注意:若固定寬度為右容器,左邊自適應。html中必須要先寫右容器。因為若左容器在前,**從上到下執行,左容器浮動會先佔滿整行,右容器只能在下浮動,如下圖。

BFC實現自適應兩欄布局

回想第一次聽到bfc的時候,是在解釋為什麼高度塌陷可以用overflow hidden 等方法來解決的時候,當時bfc對我來說還是乙個陌生的概念。在解決高度塌陷的問題的時候,通過bfc的觸發條件之一觸發bfc後,在計算bfc的高度的時候,浮動元素就可以參與計算了。bfc block formatti...

關於實現頁面兩欄,三欄自適應布局方法總結

左右兩欄布局 實現頁面兩欄布局最簡單的就是左右兩欄定寬加浮動,這也是對於新手常見的布局方式,並不是說這樣布局有多差勁,缺點一籮筐,凡是要依據實際情況而定,有時候那樣布局也是最佳的,簡單粗暴。這裡主要說下實現兩欄自適應布局的幾種方式。1.左右兩欄向左浮動,左邊設定相對定位和margin right負值...

兩列布局實現自適應的方法

注意的是 哪個div 即固定寬度的那個div 設定了浮動,哪個div標籤放在html前面 兩列布局,左側div自適應,右側div固定寬度 div class my line div class line right 北京京東尚科信技術司 div div class line left 所在公司 di...