資訊專欄INFORMATION COLUMN
摘要：必須表現為一塊一塊的，才能給出一個隔離的空間。觸發的具體條件光有的潛質，不代表就直接會觸發。最后，一般設置最常用的就是給盒子加上因為這樣的寫法基本上不會對原有的其他樣式產生影響。
BFC 即為Block formatting context 的縮寫，BFC 主要用來將一個盒子設置為一個隔離的容器，不管盒子內部的元素具有什么屬性，都不會影響到盒子的外面。
不是所有的元素都能產生BFC的，只有display 屬性為 block, list-item, table 的元素，才可以產生BFC。
這點其實根據BFC的主要作用應該可以很形象的理解。“必須表現為一塊一塊的，才能給出一個隔離的空間“。
光有BFC的潛質，不代表就直接會觸發BFC。觸發BFC 需要至少滿足下列條件中的一條：
正常情況下當父盒子不給出高度時，子盒子的高度會將把父盒子自動撐開來，讓父盒子具有高度。
而如果子元素都具有浮動時，父盒子就不會被撐開。這時使父盒子具有BFC屬性即可同時計算浮動盒子的高度
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
border: 2px solid red;
background-color: aqua;
}
.fa div {
width: 100px;
height: 100px;
float: left;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.fa .son2 {
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">div>
div>
body>
html>
View Code
在父盒子沒有觸發BFC時，顯示的結果如下
而通過2中的方法，給.fa 添加BFC （例如增加一句overflow: hidden;）效果如下
根據上述的3-（2）所說，BFC內部的相鄰的兩個盒子的margin值會重疊，那么如果不屬于同一個BFC則可以解決這個問題
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">div>
div>
body>
html>
View Code
同一個BFC下，.son1的下邊距為50px .son2的上邊距為100px 按照我們一般想要的結果是，.son1 與.son2 之間的距離為150px；
而實際效果入下：
可以很明顯看出，他們之間的距離只有100px，他們的margin重疊了。
如果給.son1 外邊在嵌套一個BFC 則 .son1 與.son2，不屬于同一個BFC就不會產生這個情況 結果如下：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 200px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
overflow: hidden;
}
.son1,
.son2 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
}
.bfc {
overflow: hidden;
}
.son1 {
margin-bottom: 50px;
}
.son2 {
margin-top: 100px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="bfc">
<div class="son1">div>
div>
<div class="son2">div>
div>
body>
html>
View Code
一個父盒子內部有兩個子盒子，如果第一個子盒子有浮動，而第二個子盒子沒有浮動，則第一個子盒子會蓋在第二個盒子上面。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<style>
.fa {
width: 400px;
margin: 100px auto;
height: 400px;
border: 2px solid red;
background-color: aqua;
}
.son1 {
width: 100px;
height: 100px;
border: 2px solid yellowgreen;
background-color: deeppink;
float: left;
}
.son2 {
height: 200px;
border: 2px solid grey;
background-color: hotpink;
}
style>
head>
<body>
<div class="fa">
<div class="son1">div>
<div class="son2">這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字這里有一大段文字div>
div>
body>
html>
View Code
如果給第二個子盒子（.son2{overflow:hidden}）添加BFC，則第二個盒子會緊貼著浮動盒子的右側，并且由于第二個子盒子沒有寬度，所以他的寬度會自適應剩余大小。
最后，一般設置BFC最常用的就是給盒子加上 overflow: hidden; 因為這樣的寫法基本上不會對原有的其他樣式產生影響。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1739.html
摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。 一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS： 樣式： 布局： 標準流(標準文檔流、普通文檔流)：盒子模型(width/height...
摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。 張鑫旭的CSS深入理解之float浮動學習筆記 float的歷史 float為產生文字環繞效果而生 float的特性 — 包裹和破壞 包裹：即產生一個BFC破壞：使父容器...
摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無 《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...
摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬 張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸 可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...
摘要：內部樣式表內部樣式表一般寫在頭部，在標簽內用標簽括起來。外部樣式表外部樣式表是單獨將樣式寫到一個文件中，并在頭部引用。使用外部樣式表時要注意如果出現多重樣式時樣式覆蓋帶來的問題。CSS 引入共有三種方式：內部樣式表，內聯樣式（行內樣式）表，外部樣式表，當然也可以使用多重樣式 內聯樣式 內聯樣式表 內聯樣式 直接把樣式卸載html代碼行內，一般僅僅在此樣式僅僅只在當前元素上應用時使用，其他...
閱讀 713·2023-04-25 19:43
閱讀 3910·2021-11-30 14:52
閱讀 3784·2021-11-30 14:52
閱讀 3852·2021-11-29 11:00
閱讀 3783·2021-11-29 11:00
閱讀 3869·2021-11-29 11:00
閱讀 3557·2021-11-29 11:00
閱讀 6105·2021-11-29 11:00
