一分钟入门并掌握CSS之BFC,margin塌陷
大家好,我是YoursJoker,想要走出大山的一个小菜鸟,今天将用简单易懂的语言,让大家快速了解和掌握CSS中的BFC和margin塌陷(本人新手一枚,各位大佬们多多包涵)
何为BFC
BFC就是块级格式化上下文block formatting context
BFC特性:
- BFC就是页面上的一个隔离的独立容器,容器里的子元素不会影响到外面的元素
- 计算BFC高度时,浮动元素会被计算进去,可用于清除浮动
- 内部的Box会在垂直方向,从顶部开始一个接一个的放置,相当于文档流
- Box垂直方向的距离由margin决定,会叠加,而不是取
margin-bottom
和margin-top
的最大值,可解决margin塌陷,关于margin塌陷滑下手指就能看到啦
触发bfc条件
- position:absolute/fixed
- display:inline-block
- float:right/left
- overflow:不为visible(
scroll
/hidden
/auto
)
margin塌陷
- 兄弟元素:垂直方向的
margin
会出现合并,即只取前一个元素margin-bottom或后一个元素margin-top两者的较大值;水平方向不会出现合并,会正常叠加 - 父子元素:子元素设置
margin-top
时会忽视父元素上边,有点像挡不住子元素,子元素“逃”出去了,干说不是很很清楚,直接上代码吧
<div class="father"> //父元素红色
<div class="son"></div> //子元素黑色
</div>
.father{
width: 200px;
height: 200px;
background-color: #f00;
}
.item1{
margin-top: 20px; //子元素设置margin-top
width: 50px;
height: 50px;
background-color: #000;
}
理想的样子是子元素距离父元素上边距20px
,可实际是子元素直接“忽略”了父元素
解决方法
- 最直接给父元素设置
border-wide
,可我们往往不需要这个边框,影响美观,这时就可采用下面这种方法 - 可用前面所讲的bfc解决margin塌陷问题
- 浮动元素产生了浮动流:所有产生了浮动流的元素,块级元素看不到他们
- 产生了bfc的元素、文本类型属性(包括
inline
inline-block
的)文本都能看到浮动元素(图片配合float可以形成环绕文字的效果哦!)。 - 设置了
position:absolute
和float:left/right
的元素会变成inline-block元素