子标签float后溢出父标签问题的解决

最新推荐文章于 2024-10-11 13:38:20 发布

原创最新推荐文章于 2024-10-11 13:38:20 发布 · 416 阅读

0 ·

CC 4.0 BY-SA版权

子标签float后溢出父标签的解决

1 第一种方法：给父标签加overflow:hidden;
- 1.1 IE7, IE8, FF
- 1.2 IE6
  - 1.2.1 css hack?
2 第二种方法：加入平等div，再clear:both;
3 第三种方法：父标签也float,父标签的父标签（爷标签？）overflow:hidden;

1 第一种方法：给父标签加overflow:auto;

1.1 IE7, IE8, FF

在父标签加一句:

overflow: auto;

1.2 IE6

1.2.1 css hack?

later

果然是：针对IE7、IE8和火狐，可以给父标签加上overflow:auto;样式，而加上这个样式后，IE6并没有什么变化，我们都知道，IE6在解释height的时候，是按最小高度解释的，只要设定了height为固定数值，超出这个数值后，IE6可以自动适应，由以上分析，源码样式部分修改如下：

ul {list-style:none;margin:0;padding:0;}                                      
#div_01 {background:red;overflow:auto;}                                       
*html #div_01 {height:1px;overflow:visible;}                                  
#div_01 div {float:left;padding-left:10px;}                                   
#div_02 {width:300px;height:100px;background:blue;}

其中，*html是筛选出IE6专属css的前缀，见：

.main{ float:left;#float:none;float:none;
html*.main{ float:left;#float:none;float:none; }
*+html .main{ float:left;#float:none;float:none; }
*html .main{ float:left;#float:none;float:none; }

第1行给Firefox以及其他浏览器看第2行给safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一 , 就要在后面跟IE6/IE7的定义第4行给IE6以及更老的版本看

来自：百度经验。

2 第二种方法：加入平等div，再clear:both;

如果父标签除了float的子标签（无论几个），没有其他不float的标签，就会发生溢出，因为父标签不知道如何定位自己，这时加入一个空的clear:both;标签即可。

见：

/*CSS file*/
<style type="text/css">
<!--
.clear-float {
clear: both;
}
-->
</style>

/*HTML file*/
<body>
<div id="parent-div">
<div id="child-div"></div>
<div id="child-div"></div>
<div class="clear-float"></div>
</div>
</body>

原文：子标签div使用float，父标签div如何自适应高度。

3 第三种方法：父标签也float,父标签的父标签（爷标签？）overflow:auto;

见：

/* CSS style part*/
<style type="text/css">
/*注意，最“父”container没必要float也没overflow:auto;*/
#container {
    border: 4px solid gray;
    margin: 0 auto;
    width: 800px;
}

#left {
    overflow: hidden;
    width: 550px;
}

#leftre {
    float: left;
    left: 2%;
    position: relative;
    width: 47%;
}

#rightre {
    float: right;
    position: relative;
    right: 2%;
    width: 47%;
}

.individual {
    background-color: #E1D697;
    border: 2px solid gray;
    float: left;
    font-size: 8pt;
    font-weight: bold;
    padding: 8px;
    width: 240px;
}

.information {
    float: left;
    margin-bottom: 3em;
    width: 240px;
}




</style>

/*HTML part*/
<div id="container">
    <div id="left">
        <div id="review">
                        <div id="leftre">
                                <p class="individual">
                                        <q>Ditching the cheeky, self-aware wink that helped to excuse the concept's inherent corniness, the movie attempts to look polished and 'cool,' but the been-there animation can't compete with the then-cutting-edge puppetry of the 1990 live-action movie.</q>
                                </p>
                                <p class="information">
                                        Peter Debruge <br>
                                Variety
                                </p>
                                <p class="individual">
                                        <q>TMNT is a fun, action-filled adventure that will satisfy longtime fans and generate a legion of new ones.</q>
                                </p>
                                <p class="information">
                                        Todd Gilchrist <br>
                                        IGN Movies
                                </p>
                        </div>

                        <div id="rightre">
                                <p class="individual">
                                        <q>The striking use of image and motion allows each sequence to leave an impression. It's an accomplished restart to this franchise.</q>
                                </p>
                                <p class="information">
                                        Mark Palermo <br>
                                        Coast (Halifax, Nova Scotia)
                                </p>
                                <p class="individual">          
                                        <q>The script feels like it was computer generated. This mechanical presentation lacks the cheesy charm of the three live action films.</q>
                                </p>
                                <p class="information">
                                        Steve Rhodes <br>
                                        Internet Reviews
                                </p>
                        </div> /* end of div-"rightre" */
                </div>/* end of div-"review" */
        </div>/* end of div-left */
</div>/* end of div-container */