手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >css清除浮动的几种方法和示例
css清除浮动的几种方法和示例
摘要:1、【.clr{clear:both;}】,设置了clear属性的元素,其上边框会紧贴着浮动元素的margin-bottom边界位置渲染,忽...

1、【.clr{clear:both;}】,设置了clear属性的元素,其上边框会紧贴着浮动元素的margin-bottom边界位置渲染,忽略其margin-top设置。

.divcss5{ width:400px;border:1px solid #F00;background:#FF0}

.divcss5-left,.divcss5-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.divcss5-left{ float:left}

.divcss5-right{ float:right}

.clear{ clear:both}

2、空标签清浮动:【.clr{clear:both;height:0;overflow:hidden;}】,不推荐。

3、伪类after清浮动:【.clr:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。

4、使用【display:table】。

5、使用overflow除visible,类似于激发haslayout。

6、使用浮动父元素清浮动。

.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden}

.divcss5-left,.divcss5-right{width:180px;height:100px;

border:1px solid #00F;background:#FFF}

.divcss5-left{ float:left}

.divcss5-right{ float:right}

【css清除浮动的几种方法和示例】相关文章:

css3 线性渐变和径向渐变示例附图

关于清除浮动塌陷的几种方法总结

css 控制鼠标显示样式示例

一款css实现的鼠标经过按钮的特效

用css实现十字的布局示例代码

css中的框架模

清除浮动的空DIV方法

清除行内元素之间HTML空白的几种解决方案

css3的图形3d翻转效果应用示例

css清除浮动clearfix:after的用法详解

精品推荐
分类导航