哈哈哈哈哈哈哈，我懂了原理啦
clear清除的是浮动的高度（就是跑到位置），而不影响浮动的方向.
原理如下：
clear清除的是元素本身，但不会影响方向。通俗点说就是clear清除的是浮动产生的文档流。举个例子，就是有2个div,当第二个div产生浮动时，第二个div会脱离第二行，到达第一行。当你清除它的时候，清除的就是这个跑的距离。
浮动的特性导致了与想象中的不一样。这特性指脱离文档流和上前补位。只要前面一个元素浮动了，空出了位置，后面一个元素就会跟着往前跑。直到把位置占领了为止。这里比较特殊的一点是，浮动有两个方向，左浮动和右浮动。而脱离文档流的div元素却并不怎么管这件事，他们的逻辑是只要有位置我就可以占领，直到没有位置为止。举个例子，有3个div,第一个div左浮动，此时，第二个div和第三个div会同时往上跑，第二个div就看不见了。但当第二个div也产生了浮动还是向右浮动时，第二个div就会在右边，能被看见，这时第三个div在第一个div下面看不见。当第三个div也向左浮动时，第三个div就会在第一个div的后面，被看见，此时他们成为一行。假设此页面现在一行一共只能容纳5个div，那么在给他一个向左浮动的div,这一行能放下，在给一个div则放不下了，此时这个div会在第一个div下面重新进行顺序排列。
clear
情况如下
两个div
第一：两个div
1.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width:100px;
height:100px;
}
#d1{
background: rebeccapurple;
}
#d2{
background: plum;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
效果图如下
</html>
第一 1.两个div左浮动
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width:100px;
height:100px;
float: left;
}
#d1{
background: rebeccapurple;
}
#d2{
background: plum;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
效果如下
第一 2.两个div左浮动 第一个div深紫色清除左浮动
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<style>
div{
width:100px;
height:100px;
float: left;
}
#d1{
background: rebeccapurple;
clear: left;
}
#d2{
background: plum;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
效果如下
原理如下：第一个深紫色div清除浮动，消除了脱离的文档流，但第一个文档流比较特殊，无法肉眼看见。因为清除并不影响它的方向，div的方向由浮动决定，所以此div还是在左。第二个div所占据的位置本来就是第一div剩下来的，现在第一个div跑回来了，第二个div也只能让位，反正无论如何，第二个div都活着第一个div的阴影下，向左浮动则救助了它，让他活成了自已
最低0.47元/天 解锁文章
7119
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
