我想问一下高度和浮动是如何工作的。我有一个外部div和一个内部div,其中有内容。它的高度可能会根据内部div的内容而变化,但似乎我的内部div将溢出它的外部div。什么是正确的方法呢?

< html > <身体> < span style=" font - family:宋体;最小高度:100 px;背景颜色:橙色”> < div风格= "宽度:500 px;身高:200 px;背景颜色:黑色;浮:对" > < / div > < / div > < /身体> < / html >


当前回答

你可以使用溢出属性的容器div,如果你没有任何div显示在容器上,例如:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

下面是下面的css:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- 或 ------------------------------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

下面是下面的css:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

其他回答

试试这个

.parent_div{
    display: flex;
}

你可以使用溢出属性的容器div,如果你没有任何div显示在容器上,例如:

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

下面是下面的css:

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- 或 ------------------------------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

下面是下面的css:

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

这是因为div的浮动。添加overflow:隐藏在外部元素。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

你遇到了浮动错误(虽然我不确定它在技术上是否是一个错误,因为有多少浏览器表现出这种行为)。事情是这样的:

在正常情况下,假设没有显式地设置高度,块级元素(如div)将根据其内容设置其高度。父div的底部将超出最后一个元素。不幸的是,浮动元素会阻止父元素在确定其高度时考虑被浮动元素。这意味着如果你的最后一个元素是浮动的,它不会像普通元素那样“拉伸”父元素。

清算

有两种常见的方法可以解决这个问题。第一种是添加一个“清算”元素;也就是说,在被浮动元素之下的另一个元素将强制父元素拉伸。所以添加下面的html作为最后一个子元素:

<div style="clear:both"></div>

它不应该是可见的,通过使用clear:both,可以确保它不会位于被浮动元素的旁边,而是在它之后。

溢出:

第二种方法,也是大多数人(我认为)更喜欢的方法是改变父元素的CSS,这样溢出就不会“可见”。因此,将overflow设置为“hidden”将迫使父对象延伸到被浮动子对象的底部之外。当然,这只在你没有在父节点上设置高度的情况下才成立。

正如我所说,第二种方法是首选的,因为它不需要向标记中添加语义上无意义的元素,但有时需要溢出可见,在这种情况下,添加清除元素是可以接受的。

你需要添加overflow:auto到你的父div,以包含内部浮动的div:

<div style="margin:0 auto;width: 960px; min-height: 100px; background-color:orange;overflow:auto">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

jsFiddle例子