一:为何要清除浮动
目前我们通常会用到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);