一分钟入门并掌握CSS之BFC，margin塌陷

一分钟入门并掌握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元素

个人Github，欢迎stars鼓励一下
个人博客，刚建立不久的博客，有空的大佬可以过来提提建议