2.清除浮动

来源：互联网发布：布袋除尘器算法编辑：程序博客网时间：2024/05/20 17:08

概念：

当父级元素没有定义高度，并产生浮动时，下面的元素位置会产生影响，会变动到上面，所以要消除这种不利影响。

方法：

额外添加标签法：在最后一个浮动的元素后添加一个标签。

<head>    <style type="text/css">        .content{            width:300px;            height:100px;            float:left;            }        .sidebar{            width:300px;            height:200px;            float:right;            }    </style></head><body>    <div class="content"></div>    <div class="sidebar"></div>    <div style="clear:both"></div></body>

2.在父级元素使用overflow:hidden
当内容超出盒子的时候不能使用这个方法

<head>    <style type="text/css">        .main{            width:300px;            margin:10px 0;            overflow:hidden            }        .content{            width:300px;            height:100px;            float:left;            }        .sidebar{            width:300px;            height:200px;            float:right;            }    </style></head><body>    <div class="main">        <div class="content"></div>        <div class="sidebar"></div>    </div></body>

3.伪元素清除浮动
意思就是在浮动元素的父元素后面加一个伪元素after

<head>    <style type="text/css">        .main{            width:300px;            margin:10px 0;            }        .content{            width:300px;            height:100px;            float:left;            }        .sidebar{            width:300px;            height:200px;            float:right;            }        .clearfix after{            content:".";            display:block;            height:0;            line-height:0;            visibility:hidden;            clear:both;            }        *兼容ie浏览器*        .clearfix{            zoom:1;            }    </style></head><body>    <div class="main clearfix">        <div class="content"></div>        <div class="sidebar"></div>    </div></body>

阅读全文

0 0