概念
BFC(块级化上下文) 是一个独立渲染的区域,处于 BFC 内部的元素与外部的元素互相隔离,使内外元素的定位不会互相影响
创建 BFC 方式
float
属性不为 none
position
属性为 absolute
和 fixed
display
属性为下列之一 table-cell
, table-caption
, inline-block
, flex
, inline-flex
overflow
属性不为 visible
(默认为 visible
,需修改为 hidden
, scroll
, auto
)规则
img { float: left; }
.content { overflow: hidden; }
<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>
margin box
的左边, 与包含块 border box
的左边相接触,即使存在浮动也是如此img { float: left; }
.content { overflow: hidden; margin-left: 210px; }
<img src="Unsplash.jpg">
<div class="content">Lorem ipsum dolor sit, amet consectet...</div>
margin
决定,属于同一个 BFC 的两个相邻 box 的 margin
会发生重叠 => 利用 BFC 消除 Margin Collapse
img {
float: left;
}
.content {
overflow: hidden;
}
.top {
margin-bottom: 10px;
}
.bottom {
margin-top: 20px;
}
<img src="Unsplash.jpg">
<div class="content">
<div class="top">1. Lorem ipsum dolor sit...</div>
<div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>
img {
float: left;
}
.content {
overflow: hidden;
}
.top, .bottom {
float: left;
}
<img src="Unsplash.jpg">
<div class="content">
<div class="top">1. Lorem ipsum dolor sit...</div>
<div class="bottom">2. Lorem ipsum dolor sit...</div>
</div>