浮动、表格、高度塌陷

一、浮动

 1、简介：就是使用float样式，使元素脱离文档流

       可选值：  none  默认值，不设置浮动

                       left  向左浮动

                       right  向右浮动

2、特点

 特点一：

      2.1、一旦元素设置了浮动，元素就会脱离文档流，原来在文档流得位置，会被它下面元素挤来。

      2.2、如果浮动元素它上面的元素不浮动，则浮动元素无法上移

      2.3、浮动元素也不会超过它前面浮动元素

      2.4、浮动元素不会超出它的父元素

特点二：

当浮动元素遇到了文字，浮动元素不会覆盖文字，文字会环绕在浮动元素的周围。

注意：当元素设置浮动以后，会完全脱离文档流，元素脱离文档流后，元素原来在文档流得特点，就都没有了，也就是说不再区分块，行内，行内块

二、表格

1、表格的创建

     1.1、用table创建表格

     1.2、tr表示行，一个tr表示一行

     1.3、用td表示单元格，（一个td表示一格）

     1.4、th特指表头单元格内容

     1.5、rowspan 用来设置行合并

     1.6、colspan 用来设置列合并  

 2、样式：

      2.1、自带属性   border="1" align="center" width='50%' height='400px'

      2.2、css设置   比较常用

3、用css设置表格样式

需求一、设置表格的宽度，表格居中，加边框，背景色样式
table {
        background-color: orange;
        width: 50%;
        margin: 50px auto;
        border: 5px solid red;
需求二： 设置表格的边框，要单线边框 
  th,td {
        border: 1px solid black;
      }
需求三：设置隔行变色
 tr:nth-child(2n + 1) {
        background-color: pink;
      }
需求五： 鼠标移入到tr以后，改变颜色
tr:hover {
        background-color: cornflowerblue;
      }
需求六：调整文字在表格中的位置  vertical-align、text-align
 th,td {
        text-align: center;
        vertical-align: middle;
      }

注意：

边框线间距变为0，双线变单线(就是单元格线合并了） 
border-spacing: 0;
设置单线
border-collapse: collapse;
     

 4、长表格

当表格长的时候，将表格分为表头(thead)、表格主题(tbody)、表格底部(tfoot)

注意：如果表格中没有写tbody，浏览器会自动在表格中添加tbody，并且将所有的tr都放到tbody中，所以注意tr并不是table的子元素，而是tbody的子元素，通过table > tr 无法选中行 需要通过tbody > tr

三、高度塌陷

面试题：什么是高度塌陷，如何解决？

一般情况下，我们是不给父元素设置高度的，让其内部的子元素自动撑开父元素的高度，这样父元素的高度就可以随着子元素高度的变化而变化 ,. 然而子元素若设置浮动，就会脱离文档流，也就撑不开父元素的高度，从而导致父元素的高度丢失，影响整个页面布局，这就叫高度塌陷。

解决方案一：给父元素设置自己的高度（不推荐使用）

解决方案二：开启BFC（面试题：什么是BFC，如何开启BFC）

BFC是元素自带的一个属性，默认是关闭的状态，一旦开启了，这个元素就会成为一个独立区块。

特点：开启BFC，垂直方向外边距不会重叠。

          开启BFC，不会被浮动元素覆盖。

          开启BFC，会包含浮动元素，可以解决高度塌陷问题

开启BFC：

 1、设置浮动

      可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

 2、将元素转成行内块

      可以解决高度塌陷，但宽度会丢失，且有三像素问题

 3、overflow属性 非visible值

      副作用最小，建议使用

 4、开启绝对定位

      可以解决高度塌陷问题，但宽度会丢失，且页面布局依然影响

扩展：opacity 设置透明度  0-1  0是透明，1是不透明

 解决方案三：可以在浮动元素下面添加一个空白的块元素，由于这个块元素没有浮动，还在文档流中可以给这个块元素设置清楚浮动，让其撑开父元素的高度，缺点是页面多了一个空白的结构。

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

解决方案四：可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，

  这样做和添加一个div的原理一样，可以达到一个相同的效果。

完善方案四：既可以解决外边距重叠，有可以解决高度塌陷，外边距使用::before,高度塌陷用::after

 解决父子外边距重叠
   解决高度塌陷 
 .clearfix::before,
 .clearfix::after {
    content: "";
    display: table;
    clear: both;
      }