清除浮动的几种方式
Posted 影子。
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了清除浮动的几种方式相关的知识,希望对你有一定的参考价值。
不清除浮动会怎样?
(1):背景不能显示
(2):边框不能撑开
(3):margin 设置值不能正确显示
(4):下方内容往上移盖住浮动区域的内容
html代码:
<div class="container"> <div class="fl"></div> <div class="fr"></div> </div> <style> .fl{float:left;} .fr{float:right;} </style>
方式一:
在.container下,最后再加一个div如下:
<div style="clear: both;height: 0; line-height: 0; font-size: 0"></div>
方式二:
给父元素.container添加样式:
.container{ overflow: auto; zoom: 1; }
方式三:
伪类清除浮动:after:
.container:after{ content:‘‘; display: block; clear: both; height:0; width:100%; visibility: hidden; } .container{ zoom:1;//为了兼容IE }
方法四:
双伪类清除浮动:
.container:before,.container:after { content: ""; display: block; clear: both; } .container{ zoom: 1; }
方式五:
展现为表格,需设置宽度:
.container{ width:100%; display:table; }
方式六:
展现为内联块状,需设置宽度:
.container{ width:100%; display:inline-block; }
方式七:
超出隐藏,不推荐使用
.container{ overflow:hidden; }
方式八:
给父元素定义高度,不推荐使用
.container{ height:50px; }
以上是关于清除浮动的几种方式的主要内容,如果未能解决你的问题,请参考以下文章