清浮动常见方法总结

来源：互联网发布：多功能拍照软件编辑：程序博客网时间：2024/05/18 09:14
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>清浮动</title>    <style type="text/css">        .father{border:1px solid red;margin:  90px auto;overflow: hidden;zoom:1;}        .child{width: 200px;height:300px;background: blue;float: left;}    /*      .clear:after{content: "";display: block;clear: both;}    ..clear{zoom:1;}    */        /*            清浮动方法总结;            1.在浮动元素下面加上<div class="clear"></div>                                .clear{clear:both;}            2. 在浮动元素下加<br clear="all" />            3.给浮动元素父级加上：<div class="father clear" >                                  .clear:after{content:"";display:block;clear:both;}                                  .clear{zoom:1;}              注意事项：                在IE6，IE7下不支持after伪类，所以要配合zoom属性来清浮动，解决兼容性问题              扩展：                在IE6,IE7下父级有宽度就不用清浮动                haslayout（默认状态下是false）根据元素内容大小或者父级的大小来重新计算元素的宽高，使用以下样式会被激活：                width:(任何值除了auto);                height:(任何值除了auto);                display:inline-block;                float:left/right;                zoom:(除normal之外任何值);            4.给浮动元素父级加上overflow：hidden/auto                                zoom:1;              注意事项;在IE6中overflow没有包住浮动元素的作用，即没有提升层级的作用，所以要配合zoom一起使用         */    </style></head><body>    <div class="father clear" >        <div class="child"></div>    </div></body></html>
0 0