详解html中清除浮动的几种方法_WEB开发

详解html中清除浮动的几种方法

来源:网络作者:佚名点击: 次时间:2017-07-19 00:37

[摘要] html div divclass='box-left'/div divclass='box-right'/div /div css .box-left,.box-right{ width:200px; height:200px; float:left; background:red; border:1pxsolid#333; } 第一种方法：.box{clear:box} 第二种方法：.box{overflow:hidden} 第三种方

html

<div>

<divclass='box-left'></div>

<divclass='box-right'></div>

</div>

css

.box-left,.box-right{

width:200px;

height:200px;

float:left;

background:red;

border:1pxsolid#333;

}

第一种方法：.box{clear:box}

第二种方法：.box{overflow:hidden}

第三种方法：.box{overflow:auto}

第四种方法：.box:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}.box{ zoom:1;}

第五种方法：.box{height:200px}设置高度

第六种方法：.box{display:table}

还有什么方法欢迎补充，加油，共同进步

标签： 网页制作

相关内容

------分隔线----------------------------

[关闭窗口] [返回顶部]

栏目列表

推荐内容

2017年最受欢迎的5个前端框架推荐
在这篇文章中，我将对我认为当今最好的 5 个框架进行比较。每...
2017年最受欢迎的5个前端框架推荐
在这篇文章中，我将对我认为当今最好的 5 个框架进行比较。每...

热点内容

搜索

热门标签:

详解html中清除浮动的几种方法