由 dawei 本文主要给大家分享浮动元素的内容，对于浮动元素的使用可能会出现多种问题，导致后面的布局混乱等等，下面我们就来看看浮动元素常见的问题及解决方法，感兴趣的朋友就继续往下看吧。
一、问题
多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成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>
注意：一般不用这个方法，会引起父级元素排版问题。
关于浮动元素的常见问题及解决方法就介绍到这，上述示例具有一定的借鉴价值，感兴趣的朋友可以参考，希望能对大家有帮助，想要了解更多浮动元素的内容，大家可以关注其它的相关文章。