溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
BFC的概念
BFC全稱Block Formatting Context ，直譯“塊級格式化上下文”，也有譯作“塊級格式化范圍”。它是 W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以及與其他元素的關系和相互作用。通俗的講，就是一個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就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
創(chuàng)建一個BFC
一個BFC可以被顯式的觸發(fā)。如果想要創(chuàng)建一個新的BFC，只需要給它添加上面提到的任何一個CSS樣式就可以了。
例如，請看下面的 HTML ：
XML/HTML Code復制內(nèi)容到剪貼板
<div class="container"> Some Content here </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 將會剪切掉溢出的元素
所以每當想要創(chuàng)建一個新的BFC的時候，我們會基于我們的需求選擇最好的樣式條件。為了一致性，我在這篇文章所給出的例子中全部使用了 overflow: hidden
CSS Code復制內(nèi)容到剪貼板
container {
overflow: hidden;
}你可以自由使用除了 overflow: hidden 之外的樣式聲明。
BFC布局引發(fā)的問題
我們看看BFC布局引發(fā)的問題吧。
例如如下代碼
CSS Code復制內(nèi)容到剪貼板
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Clear float</title>
<style type="text/css">
.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;
}
</style>
</head>
<body>
<div class="container">
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
</div>
</body>
</html>我們希望看到的效果是：
結(jié)果出現(xiàn)如下：
解決方案：
解決方法一般有2種。
1.利用 clear屬性，清除浮動
2.使父容器形成BFC
清除浮動的方法，我們可以用如下辦法：
對父元素加一個class
XML/HTML Code復制內(nèi)容到剪貼板
<div class="p floatfix"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div> </div>
添加如下CSS
CSS Code復制內(nèi)容到剪貼板
.floatfix{
*zoom:1;
}
.floatfix:after{
content:"";
display:table;
clear:both;
}這種方法是比較好的解決方案！
關于CSS如何使用BFC規(guī)則布局引發(fā)外層div包裹內(nèi)層div的處理就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內(nèi)容。
