CSS3是一種用于網頁排版樣式設計的語言，它的目標是能夠提供更加豐富的頁面效果和更優秀的用戶體驗。其中的GFC（盒子模型）與FFC（BFC的一個變種）都是CSS中的重要概念。

首先來看GFC（Global Formatting Contexts，全局格式化上下文）。

.box{
border: 1px solid red;
margin: 10px;
padding: 10px;
overflow: auto; /* 或者 hidden */
}

以上代碼中，.box被設置了邊框、內邊距和外邊距。同時，也設置了盒子的寬度和高度。在沒有設置內容寬度的情況下，.box會根據父元素的寬度自適應。如果設置了內容寬度，.box就會根據內容寬度來自適應。當內容的寬度大于盒子的寬度時，.box會出現橫向滾動條。在這個過程中，GFC的作用就是讓盒子內外的元素能夠正確的顯示和排版。

其次，來看FFC（Flex Formatting Contexts，彈性盒子模型）。

.box{
display: flex;
}

以上代碼中，.box設置了彈性盒子模型，也就是FFC（Flex Formatting Contexts）。FFC的作用是解決彈性盒子模型的元素會在父元素中“溢出”的問題。在設置了FFC后，元素就會在FFC內部自適應，不會溢出。同時，FFC也能夠使彈性盒子內的元素按照一定的排版方式展現，比如可以實現垂直和水平的居中等效果。

綜上所述，GFC和FFC在CSS的樣式設計中都起到了重要的作用。通過認真學習和掌握這些概念，并合理的運用它們，我們能夠更好地完成網頁的排版和布局設計。