欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

haorooms   發(fā)布時間：2016-06-03 11:41:27   作者：Aaron   我要評論
BFC情況下人們通常在div中使用float和margin,這會經(jīng)常出現(xiàn)一些問題,這里就來看一下CSS使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理方法,需要的朋友可以參考下.

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)容到剪貼板
  1. <div class="container">  
  2.     Some Content here   
  3. </div>  

一個新的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)容到剪貼板
  1. container {   
  2.     overflow: hidden;   
  3. }  

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

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

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <!doctype html>   
  2. <html lang="en">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>Clear float</title>   
  6.     <style type="text/css">   
  7.         .container{   
  8.             margin: 30px auto;   
  9.             width:600px;   
  10.             height: 300px;   
  11.         }   
  12.         .p{   
  13.             border:solid 3px #a33;   
  14.         }   
  15.         .c{   
  16.             width: 100px;   
  17.             height: 100px;   
  18.             background-color: #060;   
  19.             margin: 10px;   
  20.             float: left;   
  21.         }   
  22.     </style>   
  23. </head>   
  24. <body>   
  25.     <div class="container">   
  26.         <div class="p">   
  27.             <div class="c"></div>   
  28.             <div class="c"></div>   
  29.             <div class="c"></div>   
  30.         </div>   
  31.     </div>   
  32. </body>   
  33. </html>  

我們希望看到的效果是：
201663114154732.png (693×179)

結(jié)果出現(xiàn)如下：
201663114218715.png (677×165)

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

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="p floatfix">  
  2.     <div class="c">1</div>  
  3.     <div class="c">2</div>  
  4.     <div class="c">3</div>  
  5. </div>  

添加如下CSS

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .floatfix{   
  2.     *zoom:1;   
  3. }   
  4. .floatfix:after{   
  5.     content:"";   
  6.     display:table;   
  7.     clear:both;   
  8. }  

這種方法是比較好的解決方案！
另一種解決方法就是讓父元素成為BFC，這種方法有個小弊端，就是父元素也變成了浮動，不推薦用這種方法！

相關(guān)文章

  • 10分鐘理解CSS BFC原理及其應(yīng)用

    這篇文章主要介紹了10分鐘理解BFC原理及其應(yīng)用的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-01

  • 淺析CSS里的BFC和IFC的用法

    這篇文章主要介紹了淺析CSS里的BFC和IFC的用法的相關(guān)資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-01-30

  • 淺談CSS潛藏著的BFC

    這篇文章主要介紹了淺談CSS潛藏著的BFC的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-08

  • css布局之BFC模式（block formatting context）

    這篇文章主要介紹了css布局之BFC模式（block formatting context），通過BFC盒子的一些特性和應(yīng)用場景解釋了BFC模式，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙
    2017-08-16

  • CSS布局基礎(chǔ)BFC

    這篇文章主要介紹了CSS布局基礎(chǔ)BFC 的相關(guān)資料,需要的朋友可以參考下
    2016-07-14

  • CSS理解塊級格式上下文（BFC）

    BFC(Block formatting context)直譯為"塊級格式化上下文"。它規(guī)定了內(nèi)部的Block-level Box如何布局，并且與這個區(qū)域外部毫不相干.接下來通過本文給大家介紹CSS理
    2018-02-22

最新評論