浮动
浮动(float),其目的是为了排版效果,例如文图环绕,以及一些两列,或者三列的布局方式。
float
值:left | right | none |inherit
初始值: none
应用于:所有元素
继承性:无
计算值:根据指定确定
浮动遇到问题
在使用浮动过程中,往往容易碰到两种问题:
- 父元素坍塌,撑不起父元素,或者浮动元素溢出父元素
- 浮动元素遮挡了部分内容
如何清除浮动
在解决问题清除浮动前,我们先要明白这样的两个概念:
1、浮动是脱离了普通流(Normal flow)的;字面理解就是漂浮于普通流之上,可以左右浮动
2、普通流中的块级元素高度是由其内部普通流元素高度决定的
那么,清除浮动就有以下一些方法:
1、利用clear属性。
clear属性值有left,right,both,none,inherit;应用于:块级元素。
例如应用clear:left解决上图中浮动遮挡内容的问题。
2、添加额外标签。
我们可以在底部添加一个空白的<div style="clear:both"></div>
,根据普通流块级元素特性,解决撑不起父元素的问题。
3、利用:after伪元素
通过对父元素添加after伪元素.father1:after{content:""; display:block;height:0;visibility:hidden; clear:both;}
,添加一个看不见的块元素来清理浮动。
小结
其实除了上面介绍的三种方法,还有其他的清除浮动方法,例如设置父元素 overflow,在此就不一一枚举。在不同的环境选择适合的方法。通过对上面三种方法比较,个人更倾向于利用:after伪元素清除浮动,保证了整体代码结构的完整。