<style> .container{ overflow: hidden; /*display: table-caption;*/ } .box{ width: 100px; height: 100px; } .box1{ margin-bottom: 20px; background-color: orange; } .box2{ margin-top: 20px; background-color: blue; } </style> </head> <body> <div class="container"> <div class="box box1"></div> </div> <div class="container"> <div class="box box2"></div> </div> <!--// BFC是什么?怎么触发?解决的是什么问题--> <!--// 1.普通流:--> <!--//2.定位流:--> <!--//3.浮动流:--> <!--块级元素格式化上下文:--> <!--block formatting content;--> <!--//指的就是被隔离的区间;(子元素不会被外面的元素产生影响);--> <!--开启BFC的方式--> <!--body:BFC元素;--> <!--float:left | right;--> <!--overflow:hidden | scroll | auto;不是visible;--> <!--display:inline-block | table-cell | table-caption | flex | grid;(非none非inline非block)--> <!--position:absolute | fixed | 非 relative--> <script> //1.margin 重合 </script> </body>
01_BFC是什么,这篇文章主要讲的是CSS重合问题
最新推荐文章于 2024-08-25 21:41:11 发布