关于BFC的一些思考

Question

1. 以下三个div将会会如何放置(margin collapsing)？

   <style>
   body {
       margin: 0;
   }
   
   .first {
       margin: 20px;
       height: 500px;
       background-color: #666;
   }
   
   .second {
       margin: -10px;
       height: 300px;
       background-color: #999;
   }
   
   .third {
       margin: -30px;
       height: 100px;
       background-color: #ccc;
   }
   </style>
   <div class="first">
       <div class="second">
           <div class="third">
               三个元素的外边距折叠
           </div>
       </div>
   </div>

2. 同一个BFC中，相邻的块状元素都是垂直放置吗？

3. 如何清除浮动？根据什么原理？

4. 如何对左侧栏200px，主内容自适应进行布局？

5. 如何使用margin完成圣杯布局（左侧x px，右侧y px，中间自适应），用flex呢？

Answer

1. 以下三个div将会会如何放置？

   在同一个BFC中，相邻的块状
   元素会发生折叠。两个margin值都是正值，取最大值，都是负值，取最小值，一正一负则相加。那么如题有三个呢，是从父元素往子元素算起，还是子元素往外算起？如果从外往里算，是0，从内往外算是-10px。经测试，是从内往外计算。

   live demo

2. 同一个BFC中，相邻的块状元素都是垂直放置吗？

   不一定，设置writing-mode值。查看以下Demo。

   live demo

3. 如何清除浮动？根据什么原理？

   • 紧挨的块级元素设置clear both来清除浮动，一般 会通过:after清除浮动。如Bootstrap的clearfix。

     .clearfix {
         display: table;
         content: " ";
         clear: both
     }

   • 使父级元素触发一个新的BFC，如overfow:hidden或者display:table。

   live demo

4. 如何对左侧栏200px，主内容自适应进行布局？

   左栏设置200px的宽，设置浮动，主内容设置overflow:hidden触发一个BFC。因为BFC不会与浮动折叠，所以右侧会自适应。

   live demo

5. 如何使用margin完成圣杯布局（左侧x px，右侧y px，中间自适应），用flex呢？

   圣杯布局大致结构如下

   <div class="header"></div>
   <div class="container">
       <div class="main"></div>
       <div class="left"></div>
       <div class="right"></div>
   </div>
   <div class="footer"></div>

   步骤如下：

   1. .container设置内边距，留出放置左右固定宽度侧栏的宽度。设置min-width:x px（content-box）下，如果.left宽度大于父元素content-box的宽度，自己会被挤下去。

   2. .main，.left，.right设置浮动，.main设置100%的宽度。.main位置固定。

   3. .left设置x px宽度，设置margin-left为-100%，此时与.main左上角重合，设置position:relative，left设为-x px或者right设置x px，.left位置固定。

   4. .right设置y px宽度，把margin-left设为-y px，此时与.main右上角重合，相对定位回到自己的位置。(或者margin-right小于等于-y px，最后不用定位，查看margin demo2)。

   5. footer设置clear:both清除浮动，或者container设置为display:table或者overflow:hidden闭合浮动。使.footer回到正常位置。

   另外有flex布局就简单多了。需要注意的是使用margin会把.main放在最前边。而flex可以按照.left，.main，.right的顺序放置。另外flex布局也不会出现中间挤掉两边的情况。

   margin demo1
   margin demo2
   flex demo