CSS清除浮动 清除float浮动
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级
对象盒子不能被撑开,这样CSS float浮动就产生了。
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景
图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float
属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。
对象盒子不能被撑开,这样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>
清除浮动前:
清除浮动后:
备注:欢迎加入web前端求职招聘qq群:668352707
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步