频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
前端面试题整理-------HTML/CSS部分----清除浮动
2017-02-22 09:25:43         来源:shjxa的博客  
收藏   我要投稿

因为浮动会脱离文档流,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,清除浮动,使其包含框表现出正常的高度。

清除浮动主要包含以下方法:

1、为父元素添加高度,只要元素浮动在一个有高度的盒子中,那么这个浮动就不会影响后面的浮动元素,即可清除浮动带来的影响。

2、clear:both;clear为清除浮动的关键字,其只能影响清清除的元素本身,并不能影响其他元素。即clear:left指的是该元素左侧不允许出现浮动元素。同理,clear:both即为左右浮动都要清除。但是它有个缺点,即margin会失效。

3、overflow:hidden;该方法可让margin生效。但这样会导致不会自动换行使内容被隐藏,无法显示需要溢出的元素。

4、overflow:auto;该方法不会隐藏元素,但子元素高度超出父元素时,显示滚动条。

5、:after;为父元素添加伪类,即

.clearfix:after{  
      content:"";  
      display:block;  
      clear:both;  
      visibility:hidden;  
      height:0; 
} 
.clearfix{
      *zoom:1
}
其中clear:both;为清楚浮动,其余代码为将增加内容设置为不可见。最后的代码为兼容IE浏览器所写。

该方法不会影响代码结构和语义化,复用方式不当会造成代码量增加。但一般属于最常用方法。

对于这些清除浮动方法的原理可看该文章

点击复制链接 与好友分享!回本站首页
相关TAG标签 前端面试题
上一篇:皮皮学Web第二弹——Servlet
下一篇:Git常用功能总结
相关文章
图文推荐
文章
推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站