當(dāng)前位置：首頁(yè) > 前端技术 > CSS >内容正文

CSS

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

發(fā)布時(shí)間：2025/3/20 CSS 23 豆豆

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

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

1.BFC定義

它決定了塊級(jí)元素如何對(duì)它的內(nèi)容進(jìn)行布局，以及與其它元素的關(guān)系和相互作用

關(guān)鍵詞解釋：
塊級(jí)元素：父級(jí)（是一個(gè)塊元素）

內(nèi)容：子元素（是一個(gè)塊元素）

其它元素：與內(nèi)容同級(jí)別的兄弟元素

相互作用：BFC里的元素與外面的元素不會(huì)發(fā)生影響

2.BFC觸發(fā)方式

2.BFC的布局規(guī)則

3.普通文檔流布局規(guī)則

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.對(duì)于IE不支持BFC問(wèn)題的處理，Layout布局

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

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