Task3

浮动和多栏

1.小白变怪兽

1. float浮动，会使块级元素在同一行；clear清除浮动会清除所需清除的方位的float。
2. 设置一个块元素，在css中的该元素属性中margin里输入0 auto，该块元素即可居中对齐，其中在第二个位置输入auto意思为左右空间无论多大，均平均分配在该块元素左右两端。

3. 使用clearfix可解决在内部块级元素浮动且外部块级元素无边框属性时的问题，代码如下：

   .cf:before,
   .cf:after {
       content: " "; /* 1 */
       display: table; /* 2 */
   }
   .cf:after {
       clear: both;
   }

4. 某一块级元素内部块级元素浮动时，可能造成该块级元素高度为零，用以下代码即可解决:

   .clearfix:after {
      content: ' ';
      display: block;
      clear: both;
   }

   同时在需要使用该方式的块元素的名称后面加上clearfix，可替代<div> </div>的方式。
   父元素元素的第一个子元素如果会溢出父元素，可以下面代码解决：

   .clearfix:before,
   .clearfix:after {
   content: ' ';
   display: table;
   clear: both;
   }

   同时将上面的代码整合到一起，即可同时解决两项问题。