今天小编跟大家讲解下有关CSS clear属性给float带来哪些影响 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS clear属性给float带来哪些影响 的相关资料，希望小伙伴们看了有所帮助。
关于clear属性的定义参考：W3School 在阅读W3School相关内容时一定要认真 认真 仔细 仔细阅读“说明”部分：“如果声明为左边或右边清除 会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下”。 Ok 下面举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响： HTML片段一： 复制代码代码如下: #parentDiv { background: #00ff00; } .ret { width: 100px; height: 200px; background: #0000ff; } .fl { float: left; } .fr { float: right; } <div id="parentDiv"> <div id=“son1” class="fl ret"> <h2>Left</h2> </div> <div id=”son2"class="fr ret"> <h2>Right</h2> </div> </div> 效果：由于float导致两个子DIV(#son1, #son2)不占文档流 所以虽然两个子DIV的高为200PX 但是父DIV#parentDiv的高度是0PX。 问题：有时候我们需要父DIV的高度正好容纳下所有的子DIV。在这种情况下我们可以使用clear属性了。 HTML片段二：在HTML片段一的基础上添加CSS class：clear 给父DIV添加个子DIV（#son3） 复制代码代码如下: #parentDiv { background: #00ff00; } .ret { width: 100px; height: 200px; background: #0000ff; } .fl { float: left; } .fr { float: right; } .clear { clear: both; } <div id="parentDiv"> <div id=“son1” class="fl ret"> <h2>Left</h2> </div> <div id=”son2"class="fr ret"> <h2>Right</h2> </div> <div id="son3"class=“clear”> </div> </div> 效果：这种情况下父DIV的高度是200PX（和子DIV中最高的高度一样）。 分析： 子DIV（#son3）使用了clear属性 这样其上外边框在float元素（#son1 #son2）下外边框的下面 因为子DIV#son3要占文档流 所以父DIV不得不增加高度来容纳子DIV#son3 这样也就达到了预期效果。来源：爱蒂网
