什么是clear？
在HTML中，clear是一个常用的CSS属性，作用是将元素从其父元素的左右两侧浮动中解放出来，使其可以自己独立占据一行显示。
清除浮动
要理解clear属性的意义，首先需要了解CSS中浮动的概念。当一个元素浮动时，它会根据之前的元素位置来移动到父元素内，如果它有空间，那么它将停在距离其上一个元素底边最近的地方上。
但是当下一个元素也浮动时，由于这个元素占据的区域不再是父元素内固定的，而是由它本身和上一个元素决定的，所以这个元素的位置可能会覆盖到上一个元素，看起来就像两个元素重叠在了一起。
这时候就需要使用clear属性来清除父元素的浮动，使得当前元素可以独立占据一行，不再与之前的元素重叠。
<div style="float:left">左边浮动</div>
<div style="float:left">右边浮动</div>
<div style="clear:both"></div>
上面的代码中，左边和右边的两个<div>元素都设置了float:left属性，使得它们可以左右浮动，但是它们之间并没有间隔。此时需要在最下面添加一个<div>元素，并设置clear:both属性来清除浮动，这样这个元素就可以占据一行显示了。
解决父元素塌陷
在一个父元素内，如果所有的子元素都浮动，那么父元素会发生高度塌陷，导致父元素的高度变为0，看起来就像这个父元素不存在一样，而且它下方的元素也会受到影响。
这个问题也可以通过clear属性来解决。在父元素最下面添加一个<div>标签，并设置clear:both属性，可以让父元素重新获得高度，并解决高度塌陷的问题。
<div id="parent">
<div style="float:left">左边浮动</div>
<div style="float:left">右边浮动</div>
<div style="clear:both"></div>
</div>
上面的代码中，父元素div#parent下的所有子元素都浮动了，所以添加一个空的<div>标签，并设置clear:both属性。
选择不同的清除方式
clear属性还有一个非常重要的作用，就是选择不同的清除方式。
如果设置clear:both属性，就可以清除浮动元素的两侧，这是最常用的清除方式。但是还有两种不太常用的清除方式：clear:left和clear:right。这两种清除方式分别只清除元素左侧或右侧的浮动元素。
<div id="parent">
<div style="float:left">左边浮动</div>
<div style="float:right">右边浮动</div>
<div style="clear:left"></div>
</div>
上面的代码中，父元素div#parent下的两个子元素分别左浮动和右浮动，添加一个空的<div>标签，并设置clear:left属性，只清除左侧的浮动元素，可以让右浮动的元素占据整行。
总结
在HTML中，clear属性是清除浮动的常用方式，它可以将浮动元素从其父元素的两侧中解放出来，使其可以自己独立占据一行显示。这个属性还有一个重要的作用，就是选择不同的清除方式，可以清除浮动元素的两侧、左侧或右侧。
在实际开发中，我们需要根据具体情况选择不同的清除方式，以达到最好的效果。