clearboth(DIV+CSS页面中clear：both;具体怎么应用)
大家好，今天给各位分享clearboth的一些知识，其中也会对DIV+CSS页面中clear:both;具体怎么应用进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
前端大神帮忙解释一下clear:both的原理
对一个元素声明clear:both，会将来自元素周围的的浮动清除，举一个简单的例子就是当先声明一个元素向左浮动时，那么这个元素的右边就会留出一部分空白，如果这个时候空间可以容下该元素的下一个元素的大小，那么由于此元素声明过浮动向左，那么下一个元素就会自动弥补留下的空间。那么相对这个补缺的元素（本身没有声明浮动），它有一个来自他左方的浮动，如果这个时候对这个补缺的元素声明clear: both;那么它就会忽略上一个元素的浮动声明而不去补之前的空缺。
回到题主的问题，由于浏览器是按顺序render（这个我也不好翻译。。）元素的，对#div1和#div2都声明了浮动向左，那么这个时候#div1之前是没有其他浮动元素的，clear：both并不会对之后的#div2产生影响，而相对#div2，由于它之前的#div1声明向左浮动，也就给#div2留出了一部分空间，那么由于#div1声明的向左浮动，#div2默认会自动补全，这个时候再对#div2声明clear:both就会起作用，它就跑到下面去了。
至于楼上的第一个例子为什么管用，是因为他限制了parent元素的宽为100pixel,即使#div1向左浮动，也没有空间给#div2补全了，所以#div2只能跑下面去。
clear和clean的区别
一、释义不同
1、clear英[klɪə(r)]美[klɪr]
adj.清楚的；明确的；明白(某事)的；清晰的；清澈的；晴朗的；头脑清醒的
v.清空；清除；澄清；放晴；使明确
adv.清楚地；彻底地
n.空地
2、clean英[kliːn]美[kliːn]
adj.干净的；纯洁的；完全的；空白的；正当的；精准的
adv.完全地
n.清洁
v.打扫；清扫；擦，刷
二、与water组成短语的意思不同
1、clear water：意思是“清澈的水”，表示一眼望到底。
2、clean water：意思是“清洁的水”，吃了不会生病。
三、在做动词的时候侧重不同
1、clear：指清除不要的东西。
2、clean：动词中最常用的词，指将某物或某处的污物等清除掉，弄干净。
四、做动词的时候引申意思不同
1、clear：引申可指清除心中的疑虑，即“使清楚，使明白”。强调的是“除后”的“清”。
2、clean：引申可作“清扫”解。
DIV+CSS页面中clear:both;具体怎么应用
clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。
当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;
例子：
<p style="float:left;width:100px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p>这个是列的下面。</p>
如果不用清除浮动，那么第3个<P>的文字就会和第一二行在一起
所以我们在第3个这利加一个清除浮动。
<p style="float:left;width:100px;">这个是第1列，</p>
<p style="float:left;width:400px;">这个是第2列，</p>
<p clear:both;>这个是列的下面。</p>
clear:both;在css中起什么作用
clear:both;在css中，首先我们理解一下clear，顾名思义就是清除的意思，both的意思是全部，那连起来就是清除全部样式，不过这个样式主要是用于对多个div浮动的清除，如float:left,如果不清除，很容易对下面的div造成显示错位，通过代码来理解下：
<html>
<head>
<style>
.keepbj{//通过class来设置
width:100px;
height:50px;
border:1px solid#f00;
}
#div1{
float:left;
width:40px;
height:50xp;
}
#div2{
float:lleft;
width:30px;
height:50px;
}
#div3{
clear:both;//div3就不受float的影响。
width:30px;
height:30px;
}
</style>
</head>
<body>
<div class='keepbj'>
<div id='div1'>我会在左边</div>
<div id='div2'>我会在右边</div>
</div>
<div id='div3'>
我不会受flaot的影响。
</div>
</body>
</html>
好了，文章到此结束，希望可以帮助到大家。