A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

aq503298010

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© aq503298010 初级黑马   /  2019-7-31 19:10  /  1119 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

浮动主要考察为什么清除浮动和如何清除浮动的问题。
浮动场景:通常对于块级元素我们是不设置高度的(天知道以后会不会加内容,另外设置了高度会带来显示问题),块级元素的高度是靠子元素内容撑开的。这时,子元素设置浮动,子元素就会脱离文档流,此时父元素的高度就不能靠子元素内容撑开了,就会出现显示(体验)问题。
清除浮动是为了解决页面父元素高度塌陷的问题。
方法一:使用 overflow: hidden(在父元素操作)
副作用是离开了这个元素所在的区域以后会被隐藏( overflow:hidden 会将超出的部分隐藏起来),不推荐。。
方法二:添加一个标签
在父元素里面加一个标签,标签样式
.clear {
clear: both;
}
副作用就是添加了一个无用标签,不推荐。
方法三:使用伪元素来清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix: after {
content: "";
display: block;
clear: both;
height: 0;
line-height: 0;
visibility: hidden;
}
方法四:使用双伪元素清除浮动
.clearfix {
zoom: 1; // 为了兼容IE
}
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马