`
inter18099
  • 浏览: 930 次
  • 性别: Icon_minigender_1
  • 来自: 火星
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

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

 
阅读更多

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

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 */
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    详解关于浮动元素float使其父元素高度塌陷的原因及解决方法

    然而，这种技术带来了一个问题，即浮动元素可能会导致其父元素的高度塌陷，也就是父元素无法正确地包含浮动的子元素，从而在视觉上看起来父元素的高度消失了。 浮动元素的特性之一是“脱离文档流”。这意味着当一个...

    完美解决TensorFlow和Keras大数据量内存溢出的问题

    ### 完美解决TensorFlow和Keras大数据量内存溢出问题 #### 一、问题背景与挑战 在处理大规模图像数据集时，内存溢出（Out Of Memory, OOM）是一个常见的问题。尤其是在使用深度学习框架如TensorFlow或Keras进行...

    fp-adder.rar_float_float point_float point adder

    标题中的"fp-adder.rar_float_float point_float point adder"提到了浮点加法器的设计，这主要涉及计算机...通过深入学习这些内容，可以提升对浮点运算的理解，增强硬件设计能力，并为解决实际工程问题打下坚实基础。

    高度塌陷的产生条件和解决方法

    高度塌陷的产生条件和解决方法 ...这种方法可以解决高度塌陷问题，但是当子元素溢出时就会出现滚动条。 高度塌陷是前端开发中经常遇到的问题，解决高度塌陷问题有多种方法，大家可以根据实际情况选择合适的解决方法。

    01尺寸与溢出.docx

    首先是继承性，这使得子元素可以从父元素那里继承某些属性，例如字体、颜色和文本对齐方式。然而，并非所有CSS属性都可继承，像display、position或float这类与布局紧密相关的属性就不会被继承。 接着是层叠性，它...

    自适应宽度的标签导航

    在网页设计中，自适应宽度的标签导航是一种重要的布局技术，它允许导航栏根据浏览器窗口的大小自动调整其宽度，从而提供优秀的用户体验，特别是在不同设备和屏幕尺寸上。这种技术通常与响应式网页设计（Responsive ...

    Test_iconst_m1.rar_float

    3. 溢出和精度问题：检验在涉及浮点数的计算中，整数-1如何影响结果的精度和溢出情况。 4. 静态字段赋值：如果`iconst_m1`被用来初始化静态字段，然后这个字段被用于浮点数计算，测试将验证其正确性。 5. 编译器优化...

    HTML标签和CSS兼容举例

    为了解决这些问题，我们可以采用以下策略： 1. **浏览器前缀**：许多新特性在初期会带有特定浏览器的前缀，如-webkit-、-moz-、-ms-和-o-。在编写CSS时，我们需要为这些前缀添加对应的代码，以确保在多浏览器环境中...

    CSS在不同浏览器的兼容性问题

    **问题二：块属性标签float后，横行margin在IE6显示变大** - **症状**：使用`float`布局时，IE6中横行`margin`的大小会比预期的大，可能导致后续块状元素被推至下一行。 - **碰到频率**：较为复杂布局中常见。 - **...

    Html内容超出标记宽度后自动隐藏

    为了解决这个问题，CSS提供了一些有效的解决方案，让我们可以在不截断HTML标记的情况下，优雅地处理文本溢出。 首先，我们可以使用`&lt;span&gt;`标签来包裹需要限制宽度的文本，然后通过CSS来控制其行为。`&lt;span&gt;`是内联...

    CSS浮动所差生的内容溢出问题及清除浮动的方法小结

    1. **添加空` `标签**：在所有浮动元素之后插入一个空的` `标签，由于` `具有清除浮动的特性，可以解决溢出问题。但这并不是一个最佳实践，因为它引入了额外的HTML标记，可能会影响代码的可读性和维护性。 ...

    最近对问题 用分治法解决

    根据提供的标题、描述、标签及部分内容，我们可以了解到这段代码主要涉及使用分治法来解决一个特定问题。下面将详细介绍此程序的关键概念和技术细节。 ### 关键知识点 #### 1. 分治法概述 分治法是一种重要的算法...

    流式布局(标签)

    这种布局方式使得网页内容能够像水流一样自然地填充到页面的各个角落，当页面宽度不足以容纳所有元素时，元素会自动换行到下一行，而不是溢出或者缩小得无法阅读。 在流式布局中，常用的CSS属性包括： 1. **宽度...

    CSS布局是网页html通过div标签+css样式表代码开发制作的（html）网页的统称。

    为了解决这个问题，CSS引入了clear属性。clear属性用来规定元素哪一侧不允许其他浮动元素。`clear:both`常用于清除浮动，确保父元素能包围其内部的所有浮动子元素，防止背景色或边框因浮动元素而中断。 同时，CSS的...

    html阶段性测试题及答案

    2. **超链接新窗口打开**：`&lt;a&gt;`标签的`target`属性决定链接如何打开。`_blank`值表示在新窗口或标签页中打开链接，`_self`表示在当前窗口或标签页中打开，`_parent`和`_top`则与框架有关，这里不做详细展开。题目中...

    ff浏览器下兼容height：auto的问题

    这种方式的原理是通过限制元素内容的溢出，强制父元素扩展以容纳所有子元素。这种方法简单易行，适用于大多数情况。 示例代码： ```html ; width:600px; overflow:hidden;"&gt; ; height:600px; border:#099 1px ...

    XHTMLCSS标签大全

    5. `float` 用于元素的浮动，如 `float: left;` 使元素向左浮动。 6. `position` 可以设置元素的定位方式，如 `position: absolute;` 实现绝对定位。 7. `text-align` 控制文本的水平对齐，`vertical-align` 控制...

    JavaScript内部测试-笔试试题和答案.doc

    overflow 属性可以设置标签的溢出样式，overflow:scroll 可以使标签出现滚动条。 8. 阅读下面 HTML 代码，在 IE7.0 及以上版本浏览器中，两个 DIV 之间的空白距离是（C．15px）。在 IE7.0 及以上版本浏览器中，...

    前端开发面试题整合（css、js、vue。react等）

    * IE6 双边距 bug：块属性标签添加了浮动 float 之后，若在浮动方向上也有 margin 值，则 margin 值会加倍。 * 上下 margin 重合问题，相邻的两个 div margin-left margin-right 不会重合，但相邻的 margin-top ...

Magicbox
Global site tag (gtag.js) - Google Analytics