關於能夠觸發BFC特性的屬性，以及它們各自帶來的額外副作用
阿新 • • 發佈：2021-11-24
/* border不會觸發BFC，但能夠解決塌陷問題，它的副作用是多了border */
/* 下面4個屬效能夠通過觸發BFC解決塌陷問題 */
/* overflow: hidden;的副作用是可能會裁切掉我們想保留的元素 */
/* display: inline-block;的副作用是元素不再獨佔一行 */
/* position: absolute;的副作用是變成絕對定位，脫離文件流不再佔空間 */
/* display: flow-root;無副作用，但是目前仍然有瀏覽器相容性問題 */
今天整理了一下各種能夠觸發BFC的屬性，它們各自帶來的副作用
如下html程式碼，讀者可自行在瀏覽器中除錯檢視效果：
相關解釋在註釋中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>cnblog:kiss雪夜</title> <style> .outer { background-color: #f0f3f9; /* border不會觸發BFC，但能夠解決塌陷問題，它的副作用是多了border */ /* border: 1px solid #ccc; */ /* 下面4個屬效能夠通過觸發BFC解決塌陷問題 */ /* overflow: hidden;的副作用是可能會裁切掉我們想保留的元素 */ /* overflow: hidden; */ /* display: inline-block;的副作用是元素不再獨佔一行 */ /* display: inline-block; */ /* position: absolute;的副作用是變成絕對定位，脫離文件流不再佔空間*/ /* position: absolute; */ /* display: flow-root;無副作用，但是目前仍然有瀏覽器相容性問題 */ /* display: flow-root; */ } .outer p { outline: solid deepskyblue; margin: 2em; } </style> </head> <body> <div class="outer"> <p>margin: 2em;</p> </div> <div class="outer"> <p>margin: 2em;</p> </div> </body> </html>
原創文章，如有轉載請註明出處：https://www.cnblogs.com/yummylucky/p/15599750.html
cnblog：kiss雪夜