html清除浮动详解,前端面试题总结整理，css第一篇（主要讲解元素隐藏，清除浮动和display特性）！...

1. css隐藏元素的方法：

opacity:元素的不透明级别，取值.0~1.0。在取值为.0即完全透明，从视觉上隐藏了，但是依然占据自己的位置并对网页布局起作用，也会响应用户交互。

Visibility:使元素不可见，取值有

collapse[kəˈlæps]:当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用.

hidden:元素是不可见的,和opacity唯一的区别是不会响应用户交互的！

display:设置为“none”，可以说是彻底的消失，用户交互操作不生效，客户端也不能读取到！

position: 通过设置 absolute来实现，代码如下：

.hide{

position: absolute;

left: -9999px;

top: -9999px;

}

总结：如果有一个元素想要交互和不影响布局兼得，因为opacity可以响应交互，但会占据位置，影响布局；visibility既不响应交互，也影响布局；display虽不占据位置了，影响布局，但是不能响应交互。所以可以选择上面的position实现，代码可作为参考！

2. CSS清除浮动的几种方法和优缺点？

为何？

首先我们要知道为什么要清除浮动，也就是说什么情况下要清除浮动所带来的布局影响：

1) 父元素没有定义高度，那么子元素浮动了，父元素就会发生高度坍塌。

2) 块状元素，会钻进浮动元素的下面，被浮动元素所覆盖

3) 行内元素，例如文字， 则会环绕在浮动元素的周围，为浮动元素留出空间

方法

使用带有clear属性的空元素：在浮动元素下方添加空元素

{clear: both; height: 0; overflow: hidden;}

给浮动元素的父元素设置高度

缺点：在浮动元素高度不确定的时候不适用

以浮制浮(父级同时浮动)

缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题

父级设置成inline-block

缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了

给父级添加overflow:hidden 清浮动方法,出发父级元素BFC

问题：需要配合 宽度 或者 zoom 兼容IE6 IE7；

{zoom: 1;}

万能清除法 after伪类 清浮动(现在主流方法，推荐使用)

.选择符：after{

content： ”“；

height：0；

clear: both ;

display: block;

overflow: hidden;

visibility:hidden;

}

同时为了兼容 IE6，7 同样需要配合zoom使用例如：

.clear:after{content:'';display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

.clear{zoom:1;}

需要注意的

after伪类： 元素内部末尾添加内容；

:after{content"添加的内容";} IE6，7下不兼容

zoom 缩放

a、触发 IE下 haslayout，使元素根据自身内容计算宽高。

b、FF 不支持；

总结：上面几种方法中，对父元素进行设置都是解决父元素高度坍塌的问题，比如 父元素设置float; overflow：hidden; display: inline-clock都是为了触发父元素的BFC，因为BFC有条规则是: 当计算一个为BFC元素的高度时，如果该元素包含有 浮动的子元素也 参与计算的。所以就有了这样的方法了！

3. display你所不知道的知识

取值

inline-block: 默认宽度为内容宽度，可以设置宽高，同行显示(这点是最重要的，也是block为何设置为inline-block所需要的特性！)

table: 参与块格式化上下文，大体同 block。

table-cell:让标签元素以表格单元格的形式呈现，类似于td标签。

作用：

让大小不固定元素垂直居中,注意:是设置包裹父元素的属性，如下：

{display: table-cell; text-align: center; vertical-margin: middle;}

创建等高布局，子元素设置display: table-cell;包裹元素diaplay: table-row,如下

HTML代码：

CSS代码：

.list_row{display:table-row;}

.list_cell{display:table-cell; width:30%; padding:1.6%; background-color:#f5f5f5;}

/*中间一个元素背景淡蓝，有别于两边的淡灰色*/

.list_center{background-color:#f0f3f9;}