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

出现问题的代码:

.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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,283评论 25 708
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,796评论 1 92
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,232评论 4 61
  • 路边拍了一张小商店的照片,试着画下来。用的普通中性笔。怎么感觉画出来像乡村小庙呢?
    山水奏鸣阅读 391评论 4 3
  • 好久没写字了,觉得自己最近活的像个智障,却又不想改变。
    江江不入海阅读 157评论 0 1