清除浮动的五种方式、隐藏元素的五种方法

一：为何要清除浮动

目前我们通常会用到float属性。浮动的框可以左右移动控制，直到遇到另一个浮动框或者遇到他们边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内块级元素布局。此时文档流中的普通流就会表现的该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。即为何我们需要清除浮动：

a：父元素加height（父元素高已知）

b：父元素加overflow:hidden

c：父元素clear:both

d：伪对象法

.clearfloat:after{

                content:" ";

                display:block;

                clear:both;

                height:0;

                overflow:hidden;

}

.clearfloat{

                zoom:1;

}

e：空div法

浮动元素后面添加一个<div class="clear"></div>

给该div添加样式.clear{clear:both;}

二：隐藏元素的五种方法

1.visibility:

设置元素是否可见，一般设置为hidden,它很好隐藏，不会影响用户的交互，在读屏软件中不会被识别。以下它可设置的值：

 2.display：

当dinsplay设置为none时，任何对该元素直接用户交互操作都不可能生效，被隐藏的元素完全不会占用空间，仿佛元素完全不存在一样。以下它可设置的值：

 3.opacity：

这个是利用opacity透明度来隐藏的，opacity设置为0时，它只是一种视觉上的隐藏，元素本身依旧占用它的位置并对网页的布局起到作用，它也同样影响用户交互，在读屏软件中会被识别。

4.position：

元素的定位。把position:absolutely;top:-4555px;left:-45545px'top和left设置成足够大的负数，相当于把元素放到视野外的区域，他不会影响布局，能够让元素保持可操作性，在屏幕上可以被识别。

以下它可设置的值：

 5.clip-path:

可创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部SVG的路径，或者作为一个形状如circle().。clip-path属性代替了现在已经弃用的剪切clip属性。用法

clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);