一、问题
多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0。若浮动元素后面跟非浮动元素，非浮动元素会紧随其后浮动起来。若浮动元素前面还有同级元素没有浮动则会影响页面结构。二、解决办法
1.clear:both
在最后一个浮动元素后面添加属性为clear:both;的元素。
<style>div.parent>div.fl{float: left;width: 200px;height: 200px;margin-right: 20px;border: 1px solid red;}.clear{clear: both;}</style><div class="parent"><div class="fl">1</div><div class="fl">2</div><div class="fl">3</div><div class="fl">4</div><div class="clear">5</div></div>
给父元素添加clear:both;属性的:after伪元素。
<style>div.parent>div.fl{float: left;width: 200px;height: 200px;margin-right: 20px;border: 1px solid red;}.clear:after{content: '';display: block;clear: both;}</style><div class="parent clear"><div class="fl">1</div><div class="fl">2</div><div class="fl">3</div><div class="fl">4</div></div>
注意：伪元素默认是内联水平，所以借助伪元素时要设置属性display: block;。
2.overflow:auto / overflow: hidden
<style>div.parent{overflow: auto;/*overflow: hidden;也可以*/}div.parent>div.fl{float: left;width: 200px;height: 200px;margin-right: 20px;border: 1px solid red;}</style><div class="parent"><div class="fl">1</div><div class="fl">2</div><div class="fl">3</div><div class="fl">4</div></div>
3.浮动父级元素
<style>div.parent{float: left;}div.parent>div.fl{float: left;width: 200px;height: 200px;margin-right: 20px;border: 1px solid red;}</style><div class="parent"><div class="fl">1</div><div class="fl">2</div><div class="fl">3</div><div class="fl">4</div></div>
注意：一般不用这个方法，会引起父级元素排版问题。
浮动元素引起的问题和解决办法
