关于浮动的一些问题
一、清除浮动的本质
清除浮动主要为了解决父级元素因为自己浮动引起的内部高度为0的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。
二、清除浮动的四种方法
使用clear属性清除浮动
选择器{clear:属性值;} clear 清除
描述 | |
---|---|
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right |
不允许右侧有浮动元素(清除右侧浮动的影响) |
both |
但是我们实际工作中, 几乎只用 clear: both;
x 是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,或则其他标签br等亦可。
可以给父级添加: overflow为 hidden| auto| scroll 都可以实现。
优点: 代码简洁
:after 方式为空元素额外标签法的升级版,好处是不用单独加标签了
.clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 专有 */
-
-
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
-
.clearfix:before,.clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { *zoom:1; }
-
-
缺点: 由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
-
-
-
子盒子浮动了
-
优点 | 缺点 | |
---|---|---|
额外标签法(隔墙法) | 通俗易懂,书写方便 | 添加许多无意义的标签,结构化较差。 |
父级overflow:hidden; | 书写简单 | 溢出隐藏 |
父级after伪元素 | 结构语义化正确 | 由于IE6-7不支持:after,兼容性问题 |
父级双伪元素 | 结构语义化正确 |