解决高度塌陷的六种方法以及Grid网页布局补充

一，高度塌陷 

• 高度塌陷：在文档流中，若父元素未设置高度，那么父元素的高度默认是被子元素撑开的，即子元素多高，父元素就有多高。但是当子元素设置浮动之后，子元素就会完全脱离文档流，父元素还在文档流中，此时父元素的高度就没有子元素撑起（子元素无法撑起父元素的高度），从而导致父元素的高度塌陷。简单来说，就是包含含有浮动的元素的上一级的高度变为0。
• 解决方法
• 方法1：父元素结束之前添加一个标签 <div style="clear:both;"></div>
  
  <div class="testAll">
  
  <div class="test"></div>
  
  <div class="test"></div>
  
  <div class="test"></div>
  
  <div style="clear:both;">
  </div>
• 方法2：给父元素设置overflow:hidden; zoom:1;
  
  .testAll{
  
  border:2px solid #F00;
  
  overflow:hidden;
  
  zoom:1;
  
  }
  
  缺点：要是子元素要margin负值定位或是负的绝对定位，会被裁掉，所以此方法是有不小的局限性的
   
• 方法3：让父元素本身也浮动float：left;
  
  缺点：虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且会导致下边的元素上移,使得跟父元素相邻的元素的布局受到影响
   
• 方法4：给父元素一个固定高度，此方法适用于子元素高度已知并且固定的情况。
   
• 方法5：给父元素设置display: inline-block
   
• 方法6：过after伪类,after+zoom方法，最推荐的方法
  
  .testClear:after {
  
  content: "."; /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
  
  display: block; /*使生成的元素以块级元素显示，占满剩余空间*/
  
  height: 0; /*避免生成的内容破坏原有空间的高度*/
  
  clear: both; /*闭合浮动*/
  
  visibility: hidden; /*使生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
  
  }
  
  .testClear {
  
  zoom : 1; /*触发IE6/7的haslayout*/
  
  }
• 利用伪类来清除浮动，其效果跟创建一个空的div并设置其为clear：both；是一样的，只不过这里用伪类代替了空的div元素，不会影响任何其他样式，通用性强，覆盖面广。
   

二，Grid补充

•  writelines()中的参数只有一个。不同于write()，writelines()支持str同时也支持list写入
  如果使用list写入txt文件，可以写入多行；如果使用str写入txt文件，则只能写入一行。
  在list中的每个元素末尾必须加上’\n’的换行符，否则list中的各元素将写入一行之中
• auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。grid-template-columns: repeat(auto-fill, 200px) 表示列宽是 200 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素
• auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度
• grid-gap属性是grid-row-gap和grid-column-gap的合并简写形式  grid-gap: 10px 20px;
• justify-items 属性设置单元格内容的水平位置（左中右），align-items 属性设置单元格的垂直位置（上中下）  它们都有如下属性
• .container { justify-items: start | end | center | stretch; align-items: start | end | center | stretch; }
• start：对齐单元格的起始边缘   end：对齐单元格的结束边缘  center：单元格内部居中  stretch：拉伸，占满单元格的整个宽度（默认值） （前三都与文字撑开大小有关 ，若默认行 则竖直高度铺满整个空间）
• justify-content 属性是整个内容区域在容器里面的水平位置（左中右），align-content 属性是整个内容区域的垂直位置（上中下）。它们都有如下的属性值。
• .container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; }
• start - 对齐容器的起始边框
  
  end - 对齐容器的结束边框
  
  center - 容器内部居中