block format context
如何觸發乙個盒子的bfc
用以下方式:
position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;
.right.
left
加入bfc解決
margin-left: 100px;
margin-top: 50px;
width: 100px;
height: 100px;
background-color: black;
position:absolute;
display:inline-block;
overflow:hidden;
}.content
直接多加點數值用數學方法
12
.demo1
.demo2
1.浮動元素產生了浮動流
所有產生了浮動流的元素,塊級元素看不到他們
產生bfc的元素和文字類屬性的元素以及文字都能看到浮動元素
span::before
span::after
父級元素包裹浮動元素
三步
content:"";
clear: both;
display: block;
}position:absol; float: left;系統自動就設定成inline-block 格式
清除浮動 BFC
問題 父盒子高度為0,子盒子不佔位置,子盒子不會撐開父盒子。下面的標準流盒子,會跑到父盒子中的子盒子下面。處理辦法 清除浮動。清除子盒子因為浮動,對父子造成的影響 使用方法 哪兒出問題就在哪兒給 裡面的類名標籤後加乙個clearfix類名。1.clear both 2.overflow hidden...
BFC清除浮動
bfc 就是清除浮動 用來處理文件脫離文件流的問題 清除浮動的方法 a 父元素也新增乙個浮動 產生弊端就是 margin 不能使用 b 給父元素新增乙個 display inline block 弊端同a一樣 無法使用margin c 給父元素新增高 弊端 擴充套件性不好,我們無法隨意再新增元素 d...
CSS 浮動,高度塌陷和BFC,清除浮動
通過浮動,可以使乙個元素向其父元素的左側或右側移動,使用 float 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流,不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時,不會超過...