清除浮动的几种方法

页面布局中,我们经常会用到元素浮动,在很好的显示效果的同时,也带给我们带来了许多副作用,比如影响其他元素位置。

那么,如何清除这些浮动呢?下面就为大家推荐几种清除浮动的小方法:

一、空标签清除浮动:  .clear{clear:both}

1、clear语法:
clear : none|left|right|both 

2、clear参数值说明:
none :  允许两边都可以有浮动对象
both :  不允许有浮动对象
left :  不允许左边有浮动对象
right :  不允许右边有浮动对象

3、示例:


<!DOCTYPE html>
<html>
<
head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <style type="text/css"> .div1{background:pink;border:1px solid gray} .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px} .left{float:left;width:30%;height:160px;background:#eee} .right{float:right;width:30%;height:120px;background:#eee} .clearfloat{clear:both} </style> </head> <body> <div class="div1"> <div class="left">Left</div> <div class="right">Right</div> <div class="clearfloat"></div> </div> <div class="div2">div2</div> </body> </html>

4、优缺点:

    优点:通俗易懂,容易掌握

    缺点:会添加大量无语义标签,结构与表现未分离,不利于维护

 

二、父元素设置overflow:hidden

 

1、overflow语法:
overflow : visible | hidden | scroll | auto | inherit 

2、overflow参数值说明:
visible :  默认值。内容不会被修剪,会呈现在元素框之外。

hidden :  内容会被修剪,并且其余内容是不可见的。

scroll :  内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

auto :  如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

inherit :  规定应该从父元素继承 overflow 属性的值。

 

3、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;width:98%;overflow:hidden}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

 

4、优缺点:

 

    优点:不存在结构和语义化问题,代码量少

 

    缺点:内容增多时容易造成不会自动换行的后果,导致内容被隐藏,无法显示需要一处的元素。

 

三、父元素设置overflow:auto

1、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;width:98%;overflow:auto}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

2、优缺点:

    优点:不存在结构和语义化问题,代码量少

    缺点:多个嵌套后,FF在某种情况下会造成内容全选;IE在mouseover造成宽度改变时会造成最外层模块出现滚动条。

四、父元素设置display:table

1、display语法

display:table: 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。

2、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;width:98%;display:table;margin-bottom:10px;}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

3、优缺点:

    优点:结构化语义完全正确,代码量少

    缺点:和模型属性已更改,不推荐使用。

五、父元素设置hieght

1、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;height:200px;}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

2、优缺点:

    优点:简单易懂,代码量少

    缺点:只适合高度固定的布局,要给出精确的高度,不利于维护

六、父元素一起浮动

1、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;width:98%;margin-bottom:10px;float:left;}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;width:98%;clear:both}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

2、优缺点:

    优点:不存在结构和语义化问题,代码量少

    缺点:与父元素相邻的元素布局会受到影响,不可能一直浮动到body层吧,不推荐使用。

七、使用::after伪元素

1、示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style type="text/css"> 
        .div1{background:pink;border:1px solid gray;}
        .div2{background:lightgreen;border:1px solid gray;height:100px;margin-top:10px;}
        .left{float:left;width:30%;height:160px;background:#eee}
        .right{float:right;width:30%;height:120px;background:#eee}
        .div1::after{display:block;clear:both;content:"";visibility:hidden;height:0}
        .div1{zoom:1}
    </style> 
</head>
<body>
    <div class="div1"> 
        <div class="left">Left</div> 
        <div class="right">Right</div>
    </div>
    <div class="div2">div2</div> 
</body>
</html>

2、优缺点:

    优点:结构化语义完全正确。

    缺点:复用方式不当会造成代码量增加。且IE8之前版本不支持::after,需要使用zoom:1触发haslayout.

 

posted @ 2016-05-22 15:17 蔷薇蔓蔓 阅读(...) 评论(...) 编辑 收藏