触发bfc及bfc的相关应用
一.什么是bfc
定义:是一个独立的渲染区域,类似于盒子,只有block -level box块参于。规定了其如何布局,并在这区域毫不相于。
二.触发bfc的条件
1.具有浮动(即float属性不为none)
2.具有绝对定位或固定定位(position:absolute | fixed)
3.display为inline-block, table-cell, table-caption, flex, inline-flex
4.overflow不为visible(一般设置overflow:hidden)会触发BFC
三. bfc的相关应用
1.防止margin上下重叠
2.清除浮动<title>清除内部浮动与取消重叠</title> <style type="text/css"> .box{ width:1000px; height:auto; border:1px solid #0cc; margin:0 auto; overflow: hidden; /* 定义成独立的元素,隔离的元素 使撑开父元素高度*/ } .left{ height:200px; width:200px; background: pink; float:left; } .right{ height:400px; width:200px; background: orangered; float:right; } </style></head><body> <div class="box"> <div class="left"></div> <div class="right"></div> </div></body><html>