元素的隐藏特性

1.设置了float为(left/right)或者position为absolute/fixed的元素将自动变为块级元素，可直接设置宽高，无需再添加：display:block;

2.伪元素:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素。

　注意：(1)需要和content属性一起使用，

　　　　(2)这个伪元素默认是行内元素，不过可以使用display改变这一点。

3.隐藏元素的八种方法

overflow:hidden;　　　　　  /* 占据空间，无法点击 */
opacity:0；　　　　　　　　　/* 占据空间，可以点击 */
visibility:hidden；　　　　/* 占据空间，无法点击 */　　　
display:none；　　　　　　　/* 不占据空间，无法点击 */
position:absolute；　　　　/* 不占据空间，无法点击 */
clip(clip-path):rect()/inset()/polygon();　　/* 占据空间，无法点击 */
z-index:-1000；　　　　　　 /* 不占据空间，无法点击 */
transform:scaleY(0)；　　　/* 占据空间，无法点击 */

 4.清除浮动的几种方法

　　问题描述：

　　一个父元素div，两个子Div，父不设宽高，会被子元素撑起高度。
　　当给两子元素设置float（浮动，不占文档流的位置）后，父元素没有高度了————即高度塌陷

　　解决办法：

　　①伪元素清除

.clearfix:after{    
    display: block;  /* 使其成为块级元素后*/
    content: "";    /*为伪元素加入空内容，以便伪元素中不会有内容显示在页面中*/
    height: 0;       /* 为使伪元素不影响页面布局，将伪元素高度设置为0*/
    clear: both;     /* 清除浮动*/
 }
 .clearfix { *zoom:1; }  /*兼容IE6、IE7 */

　　②在需要清除浮动的元素后面添加一个空的div

clear：both　　/*与伪元素异曲同工*/

　　③给父元素添加overflow属性(一般不用这个方法)

.clearfix{ overflow：hidden/auto }　　/*overflow属性不是为了清除浮动而定义的，要小心不要覆盖住内容或者触发了不需要的滚动条*/