怎么写网络小说,女强穿越玄幻完结小说,欢乐颂小说txt

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理

這篇文章給大家介紹CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

聊城ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18982081108（備注：SSL證書合作）期待與您的合作！

BFC的概念
BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進(jìn)行定位，以及與其他元素的關(guān)系和相互作用。通俗的講，就是一個div內(nèi)部，我們用float和margin布局元素。

BFC布局規(guī)則：
1.內(nèi)部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
3.每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區(qū)域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨(dú)立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算

創(chuàng)建一個BFC
一個BFC可以被顯式的觸發(fā)。如果想要創(chuàng)建一個新的BFC，只需要給它添加上面提到的任何一個CSS樣式就可以了。
例如，請看下面的 HTML ：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

```
  
    Some Content here   
```

一個新的BFC可以通過給容器添加任何一個觸發(fā)BFC的CSS樣式，如 overflow: scroll , overflow: hidden , display: flex , float: left ,或者 display: table 來創(chuàng)建。
display:table 可能會產(chǎn)生一些問題
overflow:scroll 可能會顯示不必要的滾動條
float:left 將會把元素置于容器的左邊，其他元素環(huán)繞著它
overflow:hidden 將會剪切掉溢出的元素
所以每當(dāng)想要創(chuàng)建一個新的BFC的時候，我們會基于我們的需求選擇最好的樣式條件。為了一致性，我在這篇文章所給出的例子中全部使用了 overflow: hidden

CSS Code復(fù)制內(nèi)容到剪貼板

container {   
    overflow: hidden;   
}

你可以自由使用除了 overflow: hidden 之外的樣式聲明。

BFC布局引發(fā)的問題
我們看看BFC布局引發(fā)的問題吧。
例如如下代碼

CSS Code復(fù)制內(nèi)容到剪貼板

   
   
   
       
    Clear float   
       
        .container{   
            margin: 30px auto;   
            width:600px;   
            height: 300px;   
        }   
        .p{   
            border:solid 3px #a33;   
        }   
        .c{   
            width: 100px;   
            height: 100px;   
            background-color: #060;   
            margin: 10px;   
            float: left;   
        }

我們希望看到的效果是：
CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理

結(jié)果出現(xiàn)如下：
CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理

解決方案：
解決方法一般有2種。
1.利用 clear屬性，清除浮動
2.使父容器形成BFC
清除浮動的方法，我們可以用如下辦法：
對父元素加一個class

XML/HTML Code復(fù)制內(nèi)容到剪貼板

```
  
    1
```

新聞中心

其他資訊