前端学习笔记 清除浮动
Posted 早上吃什么
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端学习笔记 清除浮动相关的知识，希望对你有一定的参考价值。
这里有个例子
<!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属性可以指定一个元素是否可以和一个在它之上的浮动元素相邻或者这个元素必须往下移动。
以上是关于前端学习笔记 清除浮动的主要内容，如果未能解决你的问题，请参考以下文章