首页 > 代码库 > 前端学习笔记 清除浮动
前端学习笔记 清除浮动
这里有个例子
<!DOCTYPE html>
<html>
<head>
<title>test </title>
<meta charset="utf-8">
</head>
<body>
<style>
#div1{
width:100px;
height:100px;
background: red;
float:left;
}
#div2{
width:500px;
height: 500px;
background: black;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
效果如下：
红色的块向左浮动之后，就把黑色块的一部分给覆盖掉了，黑色的块不高兴了，我不想被覆盖掉啊，怎么办？ 给黑色块添加clear:left，这意思是说黑色块不允许它的左侧有浮动元素出现，如果遇到了浮动元素机会自动躲开了，自动躲开，就文中的这个例子而言，它躲开的方法应该有两种，一种是黑块往右移动，一种是黑快往下移动，是哪一种呢？看文章的最后。
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>test </title>
<meta charset="utf-8">
</head>
<body>
<style>
#div1{
width:100px;
height:100px;
background: red;
float:left;
}
#div2{
width:500px;
height: 500px;
background: black;
clear:left;
}
</style>
<div id="div1">
</div>
<div id="div2">
</div>
</body>
</html>
效果如下：
看下火狐开发者社区关于clear的说明：
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements.
意思是说clear这个css属性可以指定一个元素是否可以和一个在它之上的浮动元素相邻或者这个元素必须往下移动。
前端学习笔记 清除浮动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。