CSS 清除浮动的方法

代码如下可自行测试：

方法一：（前提条件：要知道子元素内容的高度，然后按需设置父元素的高度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动的 方法</title>
    <style type="text/css">
    /* 不清楚浮动 效果 */
    /**/
        .ft-parent { background-color: yellow;  border: 1px dashed red;}
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
    
       
    /* 方法一：效果 (条件： 要知道子元素 内容的高度，然后 按需设置 父元素的高度)*/
    /*
        .ft-parent { background-color: yellow;  border: 1px dashed red; height: 102px;}
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
    */      

    </style>
</head>
<body>

<div class="ft-parent">
    <div class="ft-l"></div>
    <div class="ft-r"></div>
</div>
    
</body>
</html>

方法二：（父元素添加 overflow:hidden;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动的 方法</title>
    <style type="text/css">
    /* 不清楚浮动 效果 */
    /**/
        .ft-parent { background-color: yellow;  border: 1px dashed red;}
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
        
    /* 方法二：效果 */
    /*
        .ft-parent { background-color: yellow;  border: 1px dashed red; overflow: hidden;}
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
    */    

    </style>
</head>
<body>

<div class="ft-parent">
    <div class="ft-l"></div>
    <div class="ft-r"></div>
</div>
    
</body>
</html>

方法三：（在父级“</div>”结束前加此div引入“class="clear"”样式 —> .clear { clear:both;}）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动的 方法</title>
    <style type="text/css">
    /* 不清楚浮动 效果 */
    /*
        .ft-parent { background-color: yellow;  border: 1px dashed red;}
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
    */
       
    /* 方法三：效果 ()*/
    /**/
        .ft-parent { background-color: yellow;  border: 1px dashed red; }
        .ft-l { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: left;  }
        .ft-r { width: 100px; height: 100px; border:1px solid blue; background-color: #ccc; float: right;  }
        .clear { clear: both; }
           
    </style>

</head>
<body>

<div class="ft-parent">
    <div class="ft-l"></div>
    <div class="ft-r"></div>
    <div class="clear"></div>
</div>
    
</body>
</html>

方法截图总结：

参考自：http://www.divcss5.com/jiqiao/j406.shtml

posted @ 2017-05-16 18:05 驸马爷阅读(246) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部