BFC和浮動元素

2021-09-11 21:53:23 字數 905 閱讀 4587

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 屬性來設定元素的浮動 可選值 注意 未設定浮動 設定浮動 浮動的特點 浮動元素會完全脫離文件流,不再佔據文件流中的位置 設定浮動以後元素會向父元素的左側或右側移動 浮動元素預設不會從父元素中移出 浮動元素向左或向右移動時,不會超過...