【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用
生活随笔
收集整理的這篇文章主要介紹了
【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
文章首發于掘金
BFC(Block Formatting Context)是Web頁面中盒模型布局的CSS渲染模式。它的定位體系屬于常規文檔流。
想要實現一個BFC布局需要滿足以下條件之一：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
想要創建一個BFC有很多方式，但是一些方式可能會帶來其他的麻煩，例如overflow:scroll等，所以使用的時候還是要注意一下，本文統一使用overflow:hidden來創建BFC。
1. bfc區域不會與float box 重疊
<style>body {width: 300px;position: relative;}.aside {width: 100px;height: 150px;float: left;background: #666666;}.main {height: 200px;background: #fcc;}</style> <body><div class="aside"></div><div class="main"></div> </body>
如果我們想要的效果是兩個盒子分開，那么我們可以利用BFC的布局規則：BFC區域不會與float box重疊的原則，我們給main加上overflow:hidden的屬性，神奇的事情發生了：
2. 計算bfc高度的時候，浮動元素也參與計算
<style>body {width: 500px;}.par {border: 5px solid #fcc;/* 下面幾種方式都會生成bfc *//* overflow: hidden; *//* display: inline-block; *//* position: absolute; *//* float: left; */}.child {border: 5px solid #f66;width: 100px;height: 100px;float: left;}</style>上述代碼因為浮動，會出現par高度塌陷的情況，為了達到清除內部浮動，我們可以觸發par生成bfc,那么par在計算高度的時候，par內部的浮動元素child也會參與計算，所以我們給par加上overflow:hidden的屬性后問題就解決了。
3. 屬于同一個bfc的兩個相鄰box的margin會發生重疊
<style>p {color: #f55;background: #fcc;width: 200px;line-height: 100px;margin: 100px;} </style><body><p>haha</p><p>hehe</p> </body>
正常我們給兩個p 標簽都加上了margin:100px，但是兩個p之間只有100px,為什么呢，同一個BFC環境時候，重疊的margin只去最大的，所以如果想解決這個問題，我們可以把下面的p標簽包一層BFC。
總結BFC的三種特性
轉載于:https://www.cnblogs.com/-yu-ze-/p/10419505.html
總結
以上是生活随笔為你收集整理的【CSS古话今说】-- 01.神奇的CSS-BFC在实战中的应用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 推荐 33 个 IDEA 最牛配置，好用
- 下一篇： 博客使用的CSS代码备份