html/css系列 BFC

Elle 發(fā)布于2019-08-02 10:39 / 2232人閱讀

摘要：本文詳情第一種中的盒子對齊創(chuàng)建一個環(huán)境第二種外邊距折疊垂直方向上的距離由決定上下同時造成重疊第二種因為浮動造成盒子對齊解決方法相隔的換成標(biāo)簽第三種左邊浮動右邊自適應(yīng)第四種文字環(huán)繞解決方法清除浮動

本文詳情:https://www.cnblogs.com/chen-...

第一種 BFC中的盒子對齊

        div {
                height: 20px;
        }
            
        .container {
            position: absolute;  /* 創(chuàng)建一個BFC環(huán)境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

第二種外邊距折疊垂直方向上的距離由margin決定

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

上下DIV同時margin 造成重疊

第二種BFC,因為浮動造成盒子對齊解決方法相隔的DIV換成P標(biāo)簽

第三種DBC 左邊浮動右邊自適應(yīng)

第四種DFC 文字環(huán)繞解決方法verflow:hidden清除浮動

云服務(wù)器 GPU云服務(wù)器 bfc bfc布局 html css HTML+CSS

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/52496.html

相關(guān)文章

html/css系列 BFC

摘要：本文詳情第一種中的盒子對齊創(chuàng)建一個環(huán)境第二種外邊距折疊垂直方向上的距離由決定上下同時造成重疊第二種因為浮動造成盒子對齊解決方法相隔的換成標(biāo)簽第三種左邊浮動右邊自適應(yīng)第四種文字環(huán)繞解決方法清除浮動本文詳情:https://www.cnblogs.com/chen-... 第一種 BFC中的盒子對齊 showImg(https://segmentfault.com/img/bVbb0q...

joyqi 2019-08-29 15:40 評論0 收藏0
Web開發(fā)系列【1】實用的網(wǎng)頁布局（PC端）

摘要：利用左側(cè)浮動，右側(cè)盒子通過形成了。三列布局這是比較復(fù)雜的布局，適合有復(fù)雜操作功能的網(wǎng)頁，如各大電商網(wǎng)站。建議升級您的瀏覽器，或使用等高級瀏覽器，將會得到更好的體驗在熟悉那些常用的軟件、工具后，我們正式開始開發(fā)，在前期準(zhǔn)備工作之后，我們要做的事情是寫頁面，也就是網(wǎng)頁布局。在w3c、菜鳥、慕課網(wǎng)等等網(wǎng)站上都有基礎(chǔ)的 HTML+CSS 知識講解，在初期學(xué)習(xí)中，跟著教程全部過一遍就差不多了。...

Andrman 2019-08-02 16:05 評論0 收藏0
Web開發(fā)系列【1】實用的網(wǎng)頁布局（PC端）

摘要：利用左側(cè)浮動，右側(cè)盒子通過形成了。三列布局這是比較復(fù)雜的布局，適合有復(fù)雜操作功能的網(wǎng)頁，如各大電商網(wǎng)站。建議升級您的瀏覽器，或使用等高級瀏覽器，將會得到更好的體驗在熟悉那些常用的軟件、工具后，我們正式開始開發(fā)，在前期準(zhǔn)備工作之后，我們要做的事情是寫頁面，也就是網(wǎng)頁布局。在w3c、菜鳥、慕課網(wǎng)等等網(wǎng)站上都有基礎(chǔ)的 HTML+CSS 知識講解，在初期學(xué)習(xí)中，跟著教程全部過一遍就差不多了。...

jerryloveemily 2019-08-29 16:44 評論0 收藏0
bfc初探

摘要：初探什么是全稱是塊級格式化上下文，是可視化渲染的一部分，它是塊級盒子的布局發(fā)生，浮動互相交互的部分。可以把父元素設(shè)置成這樣可以使這個元素包含其浮動子元素。而浮動元素本身是脫離文檔流的，非元素的高度計算是不會把浮動元素計算在內(nèi)。 bfc初探什么是bfc bfc全稱是塊級格式化上下文（block formating context），是web可視化css渲染的一部分，它是塊級盒子的布局發(fā)...

yzd 2019-08-29 12:55 評論0 收藏0
前端面試題-BFC(塊格式化上下文)

摘要：一的概念規(guī)范解釋塊格式化上下文，是頁面的可視化渲染的一部分，是布局過程中生成塊級盒子的區(qū)域，也是浮動元素與其他元素的交互限定區(qū)域。我們可以使用實現(xiàn)清除浮動，這里就不多介紹了，想要了解的可以閱讀前端面試題清除浮動。一、BFC 的概念 1.規(guī)范解釋塊格式化上下文（Block Formatting Context，BFC）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的...

Ryan_Li 2019-08-30 14:06 評論0 收藏0