因為如果你乙個前端壓根沒聽說過bfc,那你是如何理解下面這幾個css現象的呢?
現象一: 垂直方向上元素margin的合併現象首先,有父子巢狀關係的2個元素,**和示例如下:
---- html部分---
.son所以這裡的問題是: 為什麼2個div一起向下掉呢?
現象二: 垂直方向上元素margin的合併現象現在,我們有2個兄弟關係的元素,**和示例如下:
---- html部分---
.bother1
.bother2
如果你眼力不錯,或者親自試試,會發現2個div之間設定了100px的距離,但是他們現在實際的間距卻是50px。
所以這裡的問題是: 為什麼2個div的間距是50px,而非100px呢?
現象三: overflow:hidden,可以清除浮動造成的***一對父子關係的div,父元素的高度是通過子元素的高度撐開的,如圖
---- html部分---
這個現象,我相信大家都知道如何解決,不就是需要"清除浮動"嗎?
我這裡想說的是,"清楚浮動"有2種原理,一類是clear: both,一類就是依靠bfc原理.
所以這裡的問題是: 為什麼給父元素新增 overflow: hidden 就可以"清除浮動"呢?
現象四: overflow:hidden 配合浮動,可以實現2欄自適應布局如圖所示,我們已經實現了左側固定300px,右側自適應的布局
所以這裡的問題是: 為什麼新增 overflow: hidden 和 浮動就可以實現2欄自適應布局呢?
---- html部分---
right
好了,以上四個看似毫無關係的"奇葩"現象,不知道是否理解出現這些現象的原因呢?
如果回答不上來,那就建議你好好看下這篇文章了。
當然如果你沒有見過這些現象的,那你就賺到了,這麼多"奇葩"問題,你看一篇文章就全解決了,省了你不少力氣呢!
bfc是英文縮寫,翻譯為"塊級格式化上下文"。
說白了bfc就是一種css盒模型的渲染規則。既然說了是渲染規則,那你自然需要去記住這些規則了,沒法解釋為什麼。
bfc其實有很多渲染規則,我們這裡說4條比較重要的規則,知道這些規則,你就可以回答上面的4個現象了。
首先我們根元素html,就是最大的bfc容器。
建立bfc的方式很多,常見包括:
不過我覺得用到最多的還是
overflow : hidden不知道各位看了bfc的渲染規則和建立方式後,是否能夠自行去解釋前面的4個現象了呢?
補充2點:
人人都應該了解的 Android 程序管理機制
作為一名資深的手機使用者 我相信人人都是 是時候該解決這類疑問了。這一切都要從人與宇宙的關係。咳咳。手機程序的概念開始說起。在開發文件中是這麼說的 當乙個應用程式啟動時 僅僅只是 啟動時 並不一定有元件執行 就會產生乙個程序。在這個程序中同時會建立乙個主線程，使應用內的任務開始執行。android系...
人人都應該掌握的9種資料分析思維
說到資料分析，啤酒和尿布的例子大家應該都聽膩了。再具體 深入一些的內容，往往因為數學就令很多人望而卻步了。給大家分享9個不帶數學推導的資料分析思路，希望大家能喜歡 1.分類 分類分析的目標是 給一批人 或者物 分成幾個類別，或者 他們屬於每個類別的概率大小。舉個栗子 京東的使用者中，有哪些會在618...
前端 無論工作年頭長短都應該必須掌握的知識點
1 dom結構 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。2 dom操作 如何新增 移除 移動 複製 建立和查詢節點等。1 建立新節點 createdocumentfragment 建立乙個dom片段 createelement 建立乙個具體的元素 createtextnode 建立乙...