关于浮动的两个概念:
- 文档流: 文档中可显示对象在排列时所占用的位置
- 浮动的定义:使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停了下来。
浮动的特征:
- 块在一排显示
- 内联支持宽高
- 默认内容撑开宽高
- 脱离文档流
清除浮动:
clear:left|right|none|both|inherit
:元素的某个方向上不能有浮动的元素clear:both
:在左右两侧都不允许浮动元素
为什么要清除浮动:
- 两张图说明问题:
- 代码:
- 效果图:
- 代码:
分析出现的原因:
原因很简单,首先浮动的概念是脱离了文档流,所以说warp
和box
就应该是同级的关系了。而box
因为没有设置宽高,所以就会出现上图的情况
解决方案:
- 加高度。但是扩展性不好。比如瀑布流
- 父级浮动。给页面中所有的元素都加浮动。但是
margin
左右会失效 inline-block
清除。但是margin
左右会自动失效- 空标签清除(在加一个标签然后
clear:both
)。但是IE6会有2px的偏差 - br清除。但不符工作中结构样式行为三者分离的要求。
- :after伪类(现主流方法)。
代码如下
.clearfix:after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix {
*zoom:1;
}
overflow:hidden
:通过设置父元素overflow值设置为hidden。