CSS基础(5)

1.浮动的特点

1.浮动的元素不占用标准流的位置

2.浮动特性会让行内元素和块级元素都变成行内块元素，具有行内块的特性.

行内块的特点：宽高起作用，可以一行显示多个，margin,padding四面都有效

3.如果父盒子中有子盒子的话，一般的用法就是，让子盒子，要浮动都浮动，要不浮动都不浮动。

4.父盒子中的子元素，无论如何浮动，都不会超出父盒子。

5.浮动的元素跟上一个元素的位置有关系

2.设置图片在垂直方向的对齐方式

vertical-algin: top / middle /bottom

3.清除浮动的方式

1.给父元素设置一个高度很少用

2.额外标签法： clear:both 给额外的标签添加一个此属性，来清除左右的浮动，进而消除浮动对后面元素的影响

缺点是：白白的增加了一个额外的标签，会使页面标签变得冗余

3.overflow:hidden 给父元素添加overflow:hidden属性几乎不用

缺点是：会造成额外溢出来的元素被隐藏掉

4.单伪元素清除法用的很多，百度，淘宝，网易就经常的在使用

.clearfix::after {
      content:'.';    /*给生成的标签元素添加一个象征性的内容*/
      display:block; /*将这个行内伪元素转换成块级伪元素*/
      clear: both;   /*给生成的伪元素添加清除浮动的功能*/
      height: 0;    /*将content内容中的.不在页面中显示*/
      visibility: hidden;  /*再加一层保险，将多余的部分隐藏掉，不要对页面布局造成影响*/
    }
     .clearfix {
       *zoom: 1;
      }   /* IE6、7 专有 */

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浮动带来的影响</title>
  <style>
    * {
      margin:0;
      padding: 0;
    }
    .box {
      background-color:yellow;
    }
     .one,
    .two,
    .three {
      width: 200px;
      height: 200px;  
      float: left;
    }
    .one {
      background-color: blue;
    }
    .two {
      background-color: purple;
    }
    .three {
      background-color: orangered;
    }
    .demo {
      width: 320px;
      height: 320px;
      background-color: cyan;
    }
    .demo div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .demo::after {
      content:'123'
    }
    .clearfix::after {
      content:'.';    /*给生成的标签元素添加一个象征性的内容*/
      display:block; /*将这个行内伪元素转换成块级伪元素*/
      clear: both;   /*给生成的伪元素添加清除浮动的功能*/
      height: 0;    /*将content内容中的.不在页面中显示*/
      visibility: hidden;  /*再加一层保险，将多余的部分隐藏掉，不要对页面布局造成影响*/
    }
     .clearfix {
       *zoom: 1;
      }   /* IE6、7 专有 */
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="demo">
    <div></div>
  </div>
</body>
</html>

单伪元素清除法

5.双伪元素用的也很多

.clearfix:after,
    .clearfix:before {
      content:'';
      display:table;
    }
    .clearfix:after {
      clear:both;
    }
    .clearfix {   
      *zoom: 1;  /*兼容到IE6  7 浏览器*/
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>浮动带来的影响</title>
  <style>
    * {
      margin:0;
      padding: 0;
    }
    .box {
      /* height: 200px; */
      background-color:yellow;
    }
     .one,
    .two,
    .three {
      width: 200px;
      height: 200px;  
      float: left;
    }
    .one {
      background-color: blue;
      /* float: left; */
    }
    .two {
      background-color: purple;
    }
    .three {
      background-color: orangered;
    }
    .demo {
      width: 320px;
      height: 320px;
      background-color: cyan;
    }
    .demo div {
      width: 100px;
      height: 100px;
      background-color: red;
    }
    .clearfix:after,
    .clearfix:before {
      content:'';
      display:table;
    }
    .clearfix:after {
      clear:both;
    }
    .clearfix {
      *zoom: 1;
    }
  </style>
</head>
<body>
  <div class="box clearfix">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
  </div>
  <div class="demo">
    <div></div>
  </div>
</body>
</html>

双伪元素清除法

4.元素的显示方式分类

块级元素

行内元素

行内块元素