触发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>
2676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
