如果容器元素包含浮动元素,为什么高度不增加?


210

我想问一下高度和浮球的工作原理。我有一个外部div和一个内部div,其中包含内容。它的高度可能取决于内部div的内容,但似乎我的内部div会溢出其外部div。正确的做法是什么?

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



很好,非常感谢!
巴萨姆·阿鲁吉利

Answers:


581

浮动元素不会增加容器元素的高度,因此,如果不清除它们,容器高度不会增加...

我将以视觉方式向您显示:

在此处输入图片说明

在此处输入图片说明

在此处输入图片说明

更多说明:

<div>
  <div style="float: left;"></div>
  <div style="width: 15px;"></div> <!-- This will shift 
                                        besides the top div. Why? Because of the top div 
                                        is floated left, making the 
                                        rest of the space blank -->

  <div style="clear: both;"></div> 
  <!-- Now in order to prevent the next div from floating beside the top ones, 
       we use `clear: both;`. This is like a wall, so now none of the div's 
       will be floated after this point. The container height will now also include the 
       height of these floated divs -->
  <div></div>
</div>

您也可以添加overflow: hidden;容器元素,但我建议您改用容器元素clear: both;

另外,如果您想自我清除某个元素,则可以使用

.self_clear:after {
  content: "";
  clear: both;
  display: table;
}

CSS Float如何工作?

到底什么是浮点数?它有什么作用?

  • float大多数初学者都误解了该属性。好吧,到底是做float什么的?最初,float引入了该属性,以使文本围绕浮动left或的图像流动right这是 @Madara Uchicha 的另一种解释

    因此,使用该float属性并排放置盒子是否错误?答案是否定的。如果使用该float属性来并排设置框,则没有问题。

  • 浮动元素inlineblock水平元素将使元素的行为类似于inline-block元素。

    演示版

  • 如果浮动元素leftright,则width除非width明确定义,否则该元素的仅限于其持有的内容...

  • 你不能有float一个元素center。这是初学者经常遇到的最大问题,使用float: center;,这不是该float属性的有效值。float通常用于float/将内容移到最左边或最右边。只有4有效值float财产即leftrightnone(默认)和inherit

  • 当父元素包含浮动子元素时,它会折叠,为了防止这种情况,我们使用clear: both;属性来清除两侧的浮动元素,这将防止父元素崩溃。有关更多信息,您可以在这里参考我的另一个答案。

  • (重要)想一想,我们拥有一堆各种元素。当我们使用float: left;float: right;元素在堆栈上方移动一个。因此,普通文档流中的元素将隐藏在浮动元素的后面,因为它在普通浮动元素之上的堆栈级别上。(请不要将此与这z-index完全不同。)


以一个案例为例来说明CSS浮点的工作原理,假设我们需要一个简单的2列布局,其中包含页眉,页脚和2列,因此这是蓝图。

在此处输入图片说明

在上面的例子中,我们将浮动只有红色箱子,要么你可以float同时向left,或者你可以floatleft,另一个right为好,取决于布局,如果是3列,你可能float2列left,其中另一一个right取决于,尽管在此示例中,我们具有简化的2列布局,所以float一个left与另一个相对应right

用于创建布局的标记和样式在下面进一步说明...

<div class="main_wrap">
    <header>Header</header>
    <div class="wrapper clear">
        <div class="floated_left">
            This<br />
            is<br />
            just<br />
            a<br />
            left<br />
            floated<br />
            column<br />
        </div>
        <div class="floated_right">
            This<br />
            is<br />
            just<br />
            a<br />
            right<br />
            floated<br />
            column<br />
        </div>
    </div>
    <footer>Footer</footer>
</div>

* {
    -moz-box-sizing: border-box;       /* Just for demo purpose */
    -webkkit-box-sizing: border-box;   /* Just for demo purpose */
    box-sizing: border-box;            /* Just for demo purpose */
    margin: 0;
    padding: 0;
}

.main_wrap {
    margin: 20px;
    border: 3px solid black;
    width: 520px;
}

header, footer {
    height: 50px;
    border: 3px solid silver;
    text-align: center;
    line-height: 50px;
}

.wrapper {
    border: 3px solid green;
}

.floated_left {
    float: left;
    width: 200px;
    border: 3px solid red;
}

.floated_right {
    float: right;
    width: 300px;
    border: 3px solid red;
}

.clear:after {
    clear: both;
    content: "";
    display: table;
}

让我们逐步进行布局,看看float如何工作。

首先,我们使用的主要的包装元素,你可以认为它是你的口,然后我们使用header和分配height50px所以没有什么花哨那里。它只是一个普通的非浮动块级元素,100%除非它是浮动的或我们分配inline-block给它,否则它将占用水平空间。

第一个有效的值floatleft如此在我们的例子中,我们使用float: left;.floated_left,因此,我们打算在块浮动到left我们的容器元素的。

列浮动到左侧

是的,如果您看到的父元素.wrapper已折叠,则看到的带有绿色边框的那个元素没有展开,但这应该对吗?稍后,现在将回到列left

进入第二列,让它float进入right

另一列浮动在右侧

在这里,我们有一个300px宽列,我们floatright,当它浮动到时,它将位于第一列旁边left,并且由于它浮动到left,所以它为创造了一个空槽right,并且由于上有足够的空间rightright浮动元素完美地坐在旁边left

尽管如此,父元素仍然折叠,现在让我们修复它。有很多方法可以防止父元素折叠。

  • 添加一个空的块级元素并clear: both;在包含浮动元素的父元素结束之前使用,现在这是对clear浮动元素的廉价解决方案,它将为您完成工作,但是,我建议您不要使用它。

<div style="clear: both;"></div>.wrapper div结尾之前添加,例如

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

演示版

好吧,这很好地解决了问题,不再有折叠的父级,但是它为DOM添加了不必要的标记,因此有人建议overflow: hidden;在持有浮动子级元素的父级元素上使用,该子级元素可以按预期工作。

使用overflow: hidden;.wrapper

.wrapper {
    border: 3px solid green;
    overflow: hidden;
}

演示版

这每次都为我们节省了一个元素,clear float但是当我用它测试各种情况时,它在使用box-shadow子元素的一个特定案例中失败了。

演示(无法看到所有四个侧面的阴影,overflow: hidden;导致此问题)

所以现在怎么办?保存一个元素,不行overflow: hidden;,进行明确的修复,在CSS中使用以下代码段,就像overflow: hidden;对父元素一样,class对父元素进行以下调用以自清除。

.clear:after {
    clear: both;
    content: "";
    display: table;
}

<div class="wrapper clear">
    <!-- Floated Elements -->
</div>

演示版

在这里,阴影按预期工作,并且它会自动清除防止崩溃的父元素。

最后,我们clear在浮动元素之后使用页脚。

演示版


float: none;无论如何,都是使用when ,因为它是默认值,所以可以用来声明float: none;

好吧,这取决于是否要进行响应式设计,当您希望浮动元素以某个分辨率在另一个元素下面进行渲染时,会多次使用此值。因为那里的float: none;财产起着重要作用。


实际例子中很少float有有用的例子。

  • 我们已经看到的第一个示例是创建一个或多个列布局。
  • img在内部使用float p可以使我们的内容四处流通。

演示(无浮动img

演示2img浮动到left

  • 使用float用于创建水平菜单- 演示

浮动第二个元素,或者使用'margin'

最后但并非最不重要的一点,我想解释一下这种特殊情况,其中您float只将元素分配给,left而您没有float其他元素,那么会发生什么呢?

假设如果我们float: right;从中移除.floated_right class,则由于未浮动,div将会从极端渲染left

演示版

所以在这种情况下,要么你float将到left,以及

要么

您可以使用margin-left它将等于左浮动列的大小,即200pxwidth


3
规范中在此处明确说明了浮点数不会增加块级父级的高度的事实:w3.org/TR/CSS21/visudet.html#normal-block添加clearfix的原因在于1) clearfix(通常)在正常流程中2)清理浮子要求将clearfix放在浮子的最底部3)必须拉伸容器以容纳该clearfix。
BoltClock

@BoltClock,如果您回滚标题编辑会更好,因为它将严重影响搜索浮动用户的seo。您可以在google上写这些术语并进行检查。找不到他们想要的东西。
Alien先生

“ CSS float如何工作?” 这是一个极为广泛的标题,而且还会误导人们投票以关闭任何浮动问题,以作为对此问题的重复。这里的问题仅涉及一个方面:包装(或不包装)浮子的容器。
BoltClock

@BoltClock无论如何,技术性仍与中所述相同clear: both;,但是如果您认为编辑合理,那就可以了,那就继续吧
Alien先生

1
出色的答案。“任何元素向左或向右浮动,元素的宽度将受限于其所容纳的内容,除非明确定义了宽度”-我观察到同样的情况,并且只是在寻找可确认的内容。谢谢
Deen John

38

您需要添加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示例


6
这不是解决方案,您要隐藏的内容超出了外部div的范围。
亚历杭德罗·鲁伊斯·阿里亚斯

@AlejandroRuizArias-究竟如何隐藏任何东西?
j08691 2013年

3
在此示例中,什么也没有,但是如果您在内部div中引入了足够的内容,则可以。
亚历杭德罗·鲁伊斯·阿里亚斯

这并不能满足OP的需求:分叉jsfiddle.net/h0ceb5ra
TecBrat

1
太棒了 我一直在寻找的一种属性解决方案,如果其他一切都那么容易,那么就不需要收缩。
YK

10

您正在遇到浮动错误(尽管由于有多少浏览器表现出这种行为,所以我不确定它是否在技术上是错误)。这是正在发生的事情:

在正常情况下,假设未设置任何明确的高度,则块级元素(例如div)将根据其内容设置其高度。父div的底部将超出最后一个元素。不幸的是,浮动元素会阻止父级在确定其高度时考虑浮动元素。这意味着,如果最后一个元素处于浮动状态,它将不会像普通元素那样“拉伸”父元素。

清算

有两种常见的解决方法。首先是添加一个“清除”元素;也就是说,在浮动元素下方的另一个元素将迫使父元素拉伸。因此,添加以下html作为最后一个子元素:

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

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

溢出:

大多数人(我认为)首选的第二种方法是更改​​父元素的CSS,以使溢出除了“可见”之外什么都没有。因此,将溢出设置为“隐藏”将迫使父级超出浮动子级的底部。当然,只有在您未在父级上设置高度时,这才是正确的。

就像我说的那样,第二种方法是首选的,因为它不需要您向标记中添加无语义的元素,但是有时您需要将overflow其可见,在这种情况下,添加清除元素是可以接受的。


3

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

<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>

演示版


3

当存在浮动元素时,您会混淆浏览器如何呈现元素。如果一个块元素是浮动的(在您的情况下为您的内部div),则其他块元素将忽略它,因为浏览器从网页的正常流程中删除了浮动元素。然后,由于已将浮动div从正常流中删除,因此将填充外部div,就像不存在内部div一样。但是,内联元素(图像,链接,文本,黑引号)将遵守浮动元素的边界。如果在外部div中引入文本,则文本将放在内部div周围。

换句话说,块元素(标题,段落,div等)将忽略浮动元素并进行填充,而内联元素(图像,链接,文本等)则遵循浮动元素的边界。

这里的小提琴例子

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

3
不要突出显示文本并共享小提琴链接,不要在下一次答案中输入邮政编码,因为小提琴链接已死,将来的用户在这里将无法获得任何帮助,您的答案将毫无意义
Alien先生


1

如果您没有在容器上显示任何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;
    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.