當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

一天搞定CSS：BFC布局与普通文档流布局比较--15

發布時間：2025/3/20 CSS 42 豆豆

生活随笔收集整理的這篇文章主要介紹了一天搞定CSS：BFC布局与普通文档流布局比较--15 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

BFC:Block Formatting Contexts–塊級元素格式化上下文

1.BFC定義

它決定了塊級元素如何對它的內容進行布局，以及與其它元素的關系和相互作用

關鍵詞解釋：
塊級元素：父級（是一個塊元素）

內容：子元素（是一個塊元素）

其它元素：與內容同級別的兄弟元素

相互作用：BFC里的元素與外面的元素不會發生影響

2.BFC觸發方式

2.BFC的布局規則

3.普通文檔流布局規則

4.代碼演示

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title></head><body><div style="border: 1px solid #f00; display: inline-block;"><div style="width: 100px; height: 100px; background: green; float: left;">div1----</div></div><div style="border: 1px solid #f00; margin-top: 100px;"><div style="width: 100px; height: 100px; background: green; float: left;">kaivon1</div><div style="width: 100px; height: 100px; background: red; overflow: hidden;">kaivon2</div></div><div style="background: blue; margin-top: 100px; overflow: hidden;"><div style="width: 100px; height: 100px; background: green; margin-top: 100px;">kaivon1</div><div style="width: 100px; height: 100px; background: red;">kaivon2</div></div><div style="margin-top: 100px;"><div style="width: 100px; height: 100px; background: green; margin: 100px 0;">kaivon1</div><div style="overflow: hidden;"><div style="width: 100px; height: 100px; background: red; margin: 100px 0;">kaivon2</div></div></div></body> </html>

效果圖：

5.對于IE不支持BFC問題的處理，Layout布局

鏈接地址：http://blog.csdn.net/baidu_37107022/article/details/71640304

總結

以上是生活随笔為你收集整理的一天搞定CSS：BFC布局与普通文档流布局比较--15的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：一天搞定CSS： overflow--1
下一篇：一天搞定CSS：支持IE的Layout布