zoukankan      html  css  js  c++  java
  • 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开

    原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开。

    以下是几种解决办法(假设父div的class为“container”):

    方法1、使用伪类

    1 .container:after{
    2             content: ".";
    3             display: block;
    4             height: 0;
    5             clear: both;
    6             visibility: hidden;
    7         }
    1 .container{
    2             display: inline-block;/*第一种撑开办法,底下会有部分被遮到,所以添加这行,就完美了*/
    3         }

    方法2、不撑开的原理是overflow不可见,所以给父div添加overflow:auto;就行,IE要用_height:1%;

    1 .container{
    2             overflow: auto;/*让主要内容区随内容自动撑开*/
    3             overflow-y:hidden;/*把出现的滚动条隐藏,但是底下会被遮到一点,不完美*/
    4             _height:1%;/*对IE的hack*/
    5         }

    方法3、可以专门最后添加一个子div用来清除浮动:<div class="clear"></div>

              设置样式.clear{clear:both; font-size:0; height:1%;}

    方法4、可以设置父div的高度(也就是手动撑开,不灵活);

    方法5、直接给父div设置

    display: inline-block;这样也自动撑开

    方法6、直接给子div设置display: inline-block;也能自动撑开,但是排版问题有待研究学习。

    方法7、从网上还发现了一种方法,给父div增加属性:display:table;

    ---------------------------------------------------------------------------------------------

    以上办法可能还有不妥之处,有待日后补充。



  • 相关阅读:
    如何重启apache2服务
    ubuntu设置不睡眠的方法
    linux环境下安装varnish
    PHP 开发者该知道的 5 个 Composer 小技巧
    dl, dt, dd /line-height /loat /vertical-align 问题
    针对老式浏览器(主要是IE6、7、8)的css3-mediaqueries.js自适应布局
    三栏网页宽度自适应布局方法
    vue.js开发环境搭建
    vue.js之个人总结
    less学习:基础语法总结
  • 原文地址:https://www.cnblogs.com/caiquan/p/6243570.html
Copyright © 2011-2022 走看看