html/css系列 BFC

joyqi 發(fā)布于2019-08-29 15:40 / 1853人閱讀

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

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

第一種 BFC中的盒子對(duì)齊

        div {
                height: 20px;
        }
            
        .container {
            position: absolute;  /* 創(chuàng)建一個(gè)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同時(shí)margin 造成重疊

第二種BFC,因?yàn)楦?dòng)造成盒子對(duì)齊解決方法相隔的DIV換成P標(biāo)簽

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113470.html

相關(guān)文章

html/css系列 BFC

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

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

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

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

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

jerryloveemily 2019-08-29 16:44 評(píng)論0 收藏0
bfc初探

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

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

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

Ryan_Li 2019-08-30 14:06 評(píng)論0 收藏0