CSS清除浮动清除float浮动

最新推荐文章于 2024-04-22 21:55:14 发布

徐同保

最新推荐文章于 2024-04-22 21:55:14 发布

阅读量394

点赞数 1

分类专栏： web前端前端技术分享文章标签： css 清除浮动

本文链接：https://blog.csdn.net/xutongbao/article/details/78623641

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

271 篇文章 3 订阅

订阅专栏

一般浮动是什么情况呢？一般是一个盒子里使用了CSS float浮动属性，导致父级
对象盒子不能被撑开，这样CSS float浮动就产生了。

1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景
图片，而父级不能被撑开，所以导致CSS背景不能显示。

2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float
属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。

特别是上下边的padding和margin不能正确显示。

<!DOCTYPE html> 
<html> 
<head> 
<title>CSS清除浮动 清除float浮动</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
.boxa {
    background: #ddd;
    border: 5px solid green;
    margin:0 auto; 
    width:400px;
    /*height: 80px;*/  /*方法一：对父级设置适合CSS高度*/
    /*overflow: hidden; */ /*方法二：父级div定义 overflow:hidden*/
}
.boxb { 
    margin:0 auto; 
    width:400px;
} 
.boxa-l { 
    float:left; 
    width:280px; 
    height:80px; 
    border:1px solid #F00;
    background: black;
} 
.boxa-r { 
    float:right; 
    width:100px; 
    height:80px; 
    border:1px solid #F00;
    background: pink;
} 
.boxb { 
    border:1px solid #000; 
    height:40px; 
    background: yellow;
} 
.clear{ 
    clear:both
} 
</style> 
</head> 
<body> 
<div class="boxa"> 
    <div class="boxa-l">内容左</div> 
    <div class="boxa-r">内容右</div> 
    <div class="clear"></div> <!--方法三：clear:both清除浮动 -->
</div> 
<div class="boxb">boxb盒子里的内容</div> 
</body> 
</html>

清除浮动前：