美文网首页
解决子级css float 浮动而父级高度没有自适应导致子级溢出

解决子级css float 浮动而父级高度没有自适应导致子级溢出

作者: Devid | 来源:发表于2016-02-22 16:53 被阅读510次

出现问题的代码:

.divcss5{
    width:500px; 
    border:1px solid #000; 
    padding:10px
} 
.divcss5-lf{ 
    float:left; 
    width:220px; 
    height:100px; 
    background:#000
} 
.divcss5-rt{ 
    float:right; width:230px; 
    height:100px; 
    background:#06F
} 
<div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
</div> 
Paste_Image.png

解决方法:

使用clear

.clear{ 
    clear:both
} 
<div class="divcss5"> 
    <div class="divcss5-lf"></div> 
    <div class="divcss5-rt"></div> 
    <div class="clear"></div>
</div> 

效果如下:


Paste_Image.png

相关文章

网友评论

      本文标题:解决子级css float 浮动而父级高度没有自适应导致子级溢出

      本文链接:https://www.haomeiwen.com/subject/hbjbkttx.html