如果容器元素包含浮动元素，为什么它的高度不会增加? [英] Why doesn't the height of a container element increase if it contains floated elements?

查看：23
本文介绍了如果容器元素包含浮动元素，为什么它的高度不会增加?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想问一下高度和浮动是如何工作的.我有一个外部 div 和一个包含内容的内部 div.它的高度可能会因内部 div 的内容而异，但似乎我的内部 div 会溢出其外部 div.这样做的正确方法是什么?

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

</html>

解决方案

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

我会直观地向您展示:

更多解释:

<div style="float: left;"></div><div style="width: 15px;"></div><!-- 这会改变除了顶部 div.为什么?因为上面的div向左浮动，使其余空格空白 --><div style="clear: both;"></div><!-- 现在为了防止下一个 div 浮动在顶部的旁边，我们使用`clear: both;`.这就像一堵墙，所以现在没有 div将在此点之后浮动.容器高度现在还将包括这些浮动 div 的高度 --><div></div>

您还可以在容器元素上添加 overflow: hidden;，但我建议您改用 clear: both;.

此外，如果您想自行清除可以使用的元素

.self_clear:after {内容: "";清楚:两者；显示:表；}

<小时>

CSS Float 是如何工作的?

究竟什么是浮动，它有什么作用?

  • float 属性被大多数初学者误解了.那么，float 到底做了什么?最初，引入了 float 属性以在图像周围流动文本，图像浮动 left 或 right.

    是的，如果您看到父元素 .wrapper 已折叠，您看到的带有绿色边框的元素没有展开，但应该对吗?过会儿会回到这个问题，现在，我们有一列浮动到left.

    来到第二列，让它float这一列到right

    另一列向右浮动

    这里，我们有一个 300px 宽的列，我们将它浮动到右侧，当它浮动到第一列时，它将位于第一列的旁边left，并且由于它浮动到 left，它在 right 上创建了空的排水沟，并且由于 left 上有足够的空间code>right，我们的 right 浮动元素完美地位于 left 旁边.

    然而，父元素被折叠了，好吧，让我们现在解决这个问题.有很多方法可以防止父元素折叠.

    • 添加一个空的块级元素并在父元素结束之前使用 clear: both; ，它保存浮动元素，现在这是一个廉价的解决方案 clear 你的浮动元素可以为您完成这项工作，但我建议您不要使用它.

    在.wrapper div结束前添加，<div style="clear: both;"></div>，喜欢

    <!-- 浮动列--><div style="clear: both;"></div>

    演示

    嗯，这修复得很好，不再有折叠的父元素，但它给 DOM 添加了不必要的标记，所以有些人建议，在包含浮动子元素的父元素上使用 overflow: hidden;按预期工作.

    在 .wrapper

    上使用 overflow: hidden;

    .wrapper {边框:3px纯绿色；溢出:隐藏；}

    演示

    每次我们需要 clear float 时，这都为我们节省了一个元素，但是当我用它测试了各种情况时，它在一个使用 的特定情况下失败了子元素上的 box-shadow.

    Demo(4边都看不到阴影, overflow: hidden; 导致这个问题)

    那现在怎么办?保存一个元素，没有 overflow: hidden; 所以去找一个明确的修复黑客，在你的 CSS 中使用下面的代码片段，就像你使用 overflow: hidden; 一样父元素，调用父元素下面的class自清.

    .clear:after {清楚:两者；内容: "";显示:表；}<div class="wrapper clear"><!-- 浮动元素-->

演示

在这里，shadow按预期工作，而且它会自动清除防止折叠的父元素.

最后，我们在清除浮动元素后使用页脚.

演示

<小时>

float:none; 什么时候使用，因为它是默认的，所以任何使用声明 float:none;?

好吧，这取决于，如果您要进行响应式设计，当您希望浮动元素以特定分辨率呈现在另一个下方时，您将多次使用此值.对于那个 float: none; 属性在那里起着重要的作用.

<小时>

关于 float 如何有用的几个实际例子.

  • 我们已经看到的第一个示例是创建一个或多个列布局.
  • 使用 img 浮动在 p 中，这将使我们的内容能够流动.

Demo(无浮动 img)

Demo 2 (img 浮动左边)

  • 使用 float 创建水平菜单 - 演示
<小时>

浮动第二个元素，或者使用`margin`

最后但并非最不重要的一点，我想解释一下这种特殊情况，即您float 仅将单个元素移动到left，但您没有float> 另一个，那么会发生什么?

假设如果我们从 .floated_right class 中移除 float: right;，div 将被渲染从极left 开始，因为它没有浮动.

演示

所以在这种情况下，您可以 float 到 left 以及

或

你可以使用margin-left，它等于左边的大小浮动列，即 200px 宽.

I would like to ask how height and float work. I have an outer div and an inner div that has content in it. Its height may vary depending on the content of the inner div but it seems that my inner div will overflow its outside div. What would be the proper way to do it?

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

解决方案

The floated elements do not add to the height of the container element, and hence if you don't clear them, container height won't increase...

I'll show you visually:

More Explanation:

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

You can also add overflow: hidden; on container elements, but I would suggest you use clear: both; instead.

Also if you might like to self-clear an element you can use

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

How Does CSS Float Work?

What is float exactly and what does it do?

  • The float property is misunderstood by most beginners. Well, what exactly does float do? Initially, the float property was introduced to flow text around images, which are floated left or right. Here's another explanation by @Madara Uchicha.

    So, is it wrong to use the float property for placing boxes side by side? The answer is no; there is no problem if you use the float property in order to set boxes side by side.

  • Floating an inline or block level element will make the element behave like an inline-block element.

    Demo

  • If you float an element left or right, the width of the element will be limited to the content it holds, unless width is defined explicitly ...

  • You cannot float an element center. This is the biggest issue I've always seen with beginners, using float: center;, which is not a valid value for the float property. float is generally used to float/move content to the very left or to the very right. There are only four valid values for float property i.e left, right, none (default) and inherit.

  • Parent element collapses, when it contains floated child elements, in order to prevent this, we use clear: both; property, to clear the floated elements on both the sides, which will prevent the collapsing of the parent element. For more information, you can refer my another answer here.

  • (Important) Think of it where we have a stack of various elements. When we use float: left; or float: right; the element moves above the stack by one. Hence the elements in the normal document flow will hide behind the floated elements because it is on stack level above the normal floated elements. (Please don't relate this to z-index as that is completely different.)

Taking a case as an example to explain how CSS floats work, assuming we need a simple 2 column layout with a header, footer, and 2 columns, so here is what the blueprint looks like...

In the above example, we will be floating only the red boxes, either you can float both to the left, or you can float on to left, and another to right as well, depends on the layout, if it's 3 columns, you may float 2 columns to left where another one to the right so depends, though in this example, we have a simplified 2 column layout so will float one to left and the other to the right.

Markup and styles for creating the layout explained further down...

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

Let's go step by step with the layout and see how float works..

First of all, we use the main wrapper element, you can just assume that it's your viewport, then we use header and assign a height of 50px so nothing fancy there. It's just a normal non floated block level element which will take up 100% horizontal space unless it's floated or we assign inline-block to it.

The first valid value for float is left so in our example, we use float: left; for .floated_left, so we intend to float a block to the left of our container element.

Column floated to the left

And yes, if you see, the parent element, which is .wrapper is collapsed, the one you see with a green border didn't expand, but it should right? Will come back to that in a while, for now, we have got a column floated to left.

Coming to the second column, lets it float this one to the right

Another column floated to the right

Here, we have a 300px wide column which we float to the right, which will sit beside the first column as it's floated to the left, and since it's floated to the left, it created empty gutter to the right, and since there was ample of space on the right, our right floated element sat perfectly beside the left one.

Still, the parent element is collapsed, well, let's fix that now. There are many ways to prevent the parent element from getting collapsed.

  • Add an empty block level element and use clear: both; before the parent element ends, which holds floated elements, now this one is a cheap solution to clear your floating elements which will do the job for you but, I would recommend not to use this.

Add, <div style="clear: both;"></div> before the .wrapper div ends, like

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

Demo

Well, that fixes very well, no collapsed parent anymore, but it adds unnecessary markup to the DOM, so some suggest, to use overflow: hidden; on the parent element holding floated child elements which work as intended.

Use overflow: hidden; on .wrapper

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

Demo

That saves us an element every time we need to clear float but as I tested various cases with this, it failed in one particular one, which uses box-shadow on the child elements.

Demo (Can't see the shadow on all 4 sides, overflow: hidden; causes this issue)

So what now? Save an element, no overflow: hidden; so go for a clear fix hack, use the below snippet in your CSS, and just as you use overflow: hidden; for the parent element, call the class below on the parent element to self-clear.

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

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

Demo

Here, shadow works as intended, also, it self-clears the parent element which prevents to collapse.

And lastly, we use footer after we clear the floated elements.

Demo

When is float: none; used anyways, as it is the default, so any use to declare float: none;?

Well, it depends, if you are going for a responsive design, you will use this value a lot of times, when you want your floated elements to render one below another at a certain resolution. For that float: none; property plays an important role there.

Few real-world examples of how float is useful.

  • The first example we already saw is to create one or more than one column layouts.
  • Using img floated inside p which will enable our content to flow around.

Demo (Without floating img)

Demo 2 (img floated to the left)

  • Using float for creating horizontal menu - Demo

Float second element as well, or use `margin`

Last but not the least, I want to explain this particular case where you float only single element to the left but you do not float the other, so what happens?

Suppose if we remove float: right; from our .floated_right class, the div will be rendered from extreme left as it isn't floated.

Demo

So in this case, either you can float the to the left as well

OR

You can use margin-left which will be equal to the size of the left floated column i.e 200px wide.

这篇关于如果容器元素包含浮动元素，为什么它的高度不会增加?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆