范仁义css3课程---21、清除浮动 范仁义css3课程---21、清除浮动
一、总结
一句话总结：
float设置浮动之后，若想让后面元素不被浮动影响（不占浮动腾出来的地），可以用clear来清除浮动，clear可以用来清除其他浮动元素对当前元素的影响，其实清除浮动主要解决浮动高度塌陷的问题
1、clear的属性值有哪些？
none(默认值)，1eft，right，both(清除两侧浮动元素对当前元素的影响)
2、clear使用的注意点？
属性值both最常用，因为可以清除两侧浮动元素的影响，属性值为both时，是清除对他影响最大的那个元素的浮动
二、清除浮动
博客对应课程的视频位置：21、清除浮动
https://www.fanrenyi.com/video/10/58
clear可以用来清除其他浮动元素对当前元素的影响
clear的作用不是不让元素浮动，而是不让浮动的元素对其它元素产生影响
clear的属性值
none，默认值，不清除浮动
1eft，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动
三、CSS中clear的用法
转自或参考：CSS中clear的用法
https://www.cnblogs.com/xingxing88/p/5943915.html
CSS中clear用法：
clear有四个属性值： clear:left;right;both;none.
作用：该属性指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流里的物理位置的。
当属性设置float(浮动)时，它的物理位置已经脱离文档流了，但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响，这个时候我们就需要使用：clear:both;来清除。
下面是一个例子：
<p class="f1">面朝大海</p>
<p class="f2">春暖花开</p>
<p class="f3">花好月圆</p>
css定义：
p.f1{float:left;100px;}
p.f2{float:left;100px;}
以上的第三行会和第一二行在一起，因为当属性设置float(浮动)时，它的物理位置已经脱离文档流了，但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响，这个时候我们就需要使用：clear:both;来清除。
所以我们在第三行加一个清楚float(浮动):
css定义为：
p.f1{float:left;100px;}
p.f2{float:left;100px;}
p.f3{clear:both;}
四、课程代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动</title> 6 <style> 7 .box1{ 8 width: 100px; 9 height: 100px; 10 background-color: darkseagreen; 11 float: left; 12 } 13 .box2{ 14 width: 150px; 15 height: 150px; 16 background-color: orange; 17 float: right; 18 } 19 .box3{ 20 width: 200px; 21 height: 200px; 22 background-color: red; 23 clear: both; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box1"> 29 box1 30 </div> 31 <div class="box2"> 32 box2 33 </div> 34 <div class="box3"> 35 box3 36 </div> 37 </body> 38 </html>