float(对块级与行内元素的影响),如何清除浮动
影响: 浮动会使元素具有块级元素和行内元素的特点(即内联块的特点),让块元素在同一行显示。
内联块(inline-block)和浮动(float:left/right/none)(元素脱离文档流,按照浮动方向移动,遇到父级边界或者相邻浮动元素停住)但是无论哪种方式都需要做一些处理:去除inline-block的间隔和去除浮动。
- 去除inline-block的间隔
- 去掉换行符(不推荐);
- 设置margin-left为负(不推荐) 一般中间一个字符大小即一个em;
- 设置字体大小(推荐) 块中默认字体大小设为0。
- 去除浮动
- overflow:hidden隐藏/scroll 滚动条/auto,hidden可以清除浮动但有可能隐藏有用的东西(不推荐)(BFC布局原理,这三个overflow的属性为触发BFC);
- 父元素直接设置高度(当子元素的高度超过父元素的话会造成布局塌陷);
- style=”clear:both;”也可以清除浮动但是会加入空标签(不推荐);
- clearfix的方法。
.clearfix:before,.clearfix:after{display:table;content:"";}
.clearfix:after{clear:both;}
.clearfix{*zoom:1} /*(兼容低版本ie 触发haslayout)*/