BFC塊級格式化上下文

pingink 發布于2019-04-23 13:29 / 2579人閱讀

摘要：規則內部的會在垂直方向，一個接一個地放置。屬于同一個的兩個相鄰的會發生重疊。的區域不會與重疊。

規則

內部的Box會在垂直方向，一個接一個地放置。
屬于同一個BFC的兩個相鄰Box的margin會發生重疊。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素
計算BFC的高度時，浮動元素也參與計算

BFC觸發原理

1 根元素
2 float屬性不為none,例如left、right
3 position為absolute或fixed
4 display為inline-block, table-cell, table-caption, flex, inline-flex
5 overflow不為visible，例如hidden、auto

作用

清除浮動,BFC里面的浮動元素高度也會參與計算

<div class="layout">
    <div>div>
     <div>div>
div>

如果里面的兩個div為浮動，那么設置 .layout {overflow: hidden}

　　2. 防止margin重疊

總結：

BFC通俗地說：就是一個容器，里外不相互影響，記住：清除浮動的時候，如果使用 overflow： hidden，是存在缺點的，如果超過了范圍，那么則被隱藏了
清除浮動正確的方式：

.clearfix:after{
    content: ",
    height: 0;
    display: block;
    visibility: hidden;
    clear: both;
    line-height:0;//行高為0
}

GPU云服務器云服務器電腦上下載的視頻怎么轉換格式 bfc bfc布局塊級流

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1942.html

20170601-BFC(塊級格式化上下文)

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...

PAMPANG 2019-08-29 12:41 評論0 收藏0
20170601-BFC(塊級格式化上下文)

摘要：的全稱是塊級格式化上下文。浮動絕對定位的元素定位塊容器屬性為帶有屬性該屬性值不為和的為的塊級元素會在其內部建立新的塊級格式化上下文。使用可以解決以下問題父子元素的上下合并問題文字圍繞浮動元素的問題和子元素浮動導致父元素高度為的問題。 BFC BFC的全稱是Block Format Content -- 塊級格式化上下文。浮動、絕對定位的元素(absolute、fixed定位)、塊容器(...

weknow619 2019-08-01 16:56 評論0 收藏0
塊級格式化上下文(BFC)

摘要：可以阻止元素被浮動元素覆蓋浮動元素的塊級兄弟元素會無視浮動元素的位置，盡量占滿一整行，這樣就會被浮動元素覆蓋，為該兄弟元素觸發后可以阻止這種情況的發生。一、什么是BFC 具有BFC屬性的元素也屬于普通流定位方式，與普通容器沒有什么區別，但是在功能上，具有BFC的元素可以看做是隔離了的獨立容器，容器里面的元素不會在布局上影響到外面的元素，并且具有普通容器沒有的一些特性，比如包含浮動元素...

TerryCai 2019-08-29 15:22 評論0 收藏0
視覺格式化模型之BFC

摘要：詳見權威指南塊級元素即塊級元素是源文檔中被格式化為塊的元素，或者屬性為的元素。概念顧名思義塊級格式化上下文。每個元素的的左邊，與包含塊的左邊相接觸對于從左往右的格式化，否則相反。情景：浮動的高度塌陷時，使用overflow：hidden可使父元素將浮動的子元素包含起來，解決問題。但背后的原理是什么？這就是今天要談的BFC。在將BFC之前需要先了解幾個概念：盒子模型（Box mo...

anyway 2019-08-30 13:18 評論0 收藏0
BFC原理詳解

摘要：最常見的有簡稱和簡稱。可以把它理解成是一個獨立的容器，并且這個容器的里的布局，與這個容器外的毫不相干。根據布局規則第二條垂直方向的距離由決定。參考前端精選文摘神奇背后的原理之詳解深入理解流體特性和特性下多欄自適應布局布局一.BFC是什么在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念。 1.BOX：CSS布局的基本單位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 評論0 收藏0
十分鐘復習CSS盒模型與BFC

摘要：盒模型與本文為收集整理總結網上資源旨在系統復習盒模型與節省復習時間閱讀分鐘什么是盒模型每一個文檔中，每個元素都被表示為一個矩形的盒子它都會具有內容區盒模型主要分兩種標準盒模型盒模型怪異盒模型兩者的區別標準盒模型的寬高則為內容區域的寬高盒模型 css盒模型與BFC 本文為收集整理總結網上資源旨在系統復習css盒模型與bfc 節省復習時間閱讀10分鐘什么是盒模型每一個文檔中，每...

verano 2019-08-02 10:48 評論0 收藏0