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 @   驸马爷  阅读(246)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae