clear属性

clear和float

• float原意是浮动，在web页面中,页面是三维的，当给一个元素A设置了float属性以后，你可以把这个A元素想象成它“飞起来了”，因为它的起飞，所以紧跟着在它后面的B元素就把它原本的位置给占领了。所以这就导致B元素原本所处的位置发生了变化，那要是B元素想继续呆在原地，不想受到影响怎么办？可以给B设置clear:left。clear:left的意思不是说清除左浮动，而是说给当前元素穿了一个盔甲，这个盔甲可以让B元素抵抗来自它前面的具有左浮动属性的元素的影响，让B元素老老实实呆在原地。
  • 下面看一段代码：

    <div style="border: 10px solid #f00;">
      <div style="height: 100px; float: left; background: tomato;">子元素A</div>
      <div style="height: 150px; float: right; background: aquamarine;">子元素B</div>
      <div style="height: 200px; background: blueviolet;">子元素C</div>
    </div>

    • 看上面这个例子，A元素和B元素都浮动了，A元素左浮，B元素右浮动。所以，原本C元素是要老老实实的呆在他们下面的，结果现在因为A元素和B元素“飘起来”了，所以C元素就跑到他们两个的“底下”了（抬头就能看见A和B飘在头上的那种）。
    • 当你设置clear:left的时候，意思就是不让C元素受到它“前面”（这里一定要注意是“前面”，哪怕C后面的元素不管浮不浮动，对C都是没有影响的）的具有“float:left”属性的dom元素的影响。
    • 当你设置clear:right的时候，意思就是不让C元素受到它“前面”的具有“float:right”属性的dom元素的影响。
    • 当你设置clear:both的时候，意思就是不让C元素受到它“前面”的具有“float:left”属性或“float:right”属性的dom元素的影响。
  • 总而言之，一句话，说得更生动一些的话，clear就像一个牢笼，当元素想往左面或者右面跑的时候，它会紧紧的困住元素，具体就看你怎么设置了
  • 最后补充一点，为什么clear可以解决高度塌陷？就是因为clear的这个子元素可以正确归位，假设它原本离父元素的顶部距离是100px；因为浮动的原因，导致现在距离父元素的顶部距离可能是0px，但是现在clear了以后，子元素正确归位了，距离父元素的顶部依然是100px了，那父元素就被撑开了呀