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

查看：123 发布时间：2017/2/21 13:41:33 html css css-float

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

问题描述

我想问问高度和浮动的工作原理。我有一个外部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>

解决方案

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

我会直观地显示：

< img src =https://i.stack.imgur.com/7wq0g.jpgalt =enter image description here>

更多说明：

 < div> 
< div style =float：left;>< / div> 
< div style =width：15px;>< / div> <！ - 这将移动
在顶部div旁边。为什么？因为顶部div 
向左浮动，使得
空间的剩余空白 - > 
 
< div style =clear：both;>< / div> 
<！ - 现在为了防止下一个div浮动在顶部，
我们使用`clear：both;`。这就像一堵墙，所以现在没有一个div的
将浮动在这一点后。容器高度现在还包括这些浮动div的
高度 - > 
< div>< / div> 
< / div>

您也可以添加 overflow：hidden; 对于容器元素，但我建议你使用 clear：both;

 $ 
 
 
 自清除可以使用的元素
  .self_clear：{
 content：; 
 clear：both; 
 display：table; 
} 
  
 
 
 
 
 
  ？
 
 
 什么是float，它是什么？
 
 
  
    float 属性被大多数初学者误解。好吧， float 究竟是什么？最初，引入 float 属性来流动图像周围的文本，浮动左或右。  
 
 
 在这里，我们有 300px 宽列，我们 float 到右 ，它将坐在第一列之外，因为它浮动到左，并且由于它浮动到左为 right 创建空格，并且由于 right 上有足够的空格，我们的 right 浮动元素完全除了左之一。
 
 
 是崩溃，好吧，让我们修复现在。有许多方法可以防止父元素折叠。
 
 
  
 添加空块级元素，并使用 clear ：both; 在父元素结束之前，它保存了浮动的元素，现在这个是清除的廉价解决方案
 
 
 
 
 添加< div style =clear ： c> 之前的 c：>  ，如
 < div class =wrapper clear> 
<！ - 浮动列 - > 
< div style =clear：both;>< / div> 
< / div> 
  
   Demo   
 
 
 好了，修复效果非常好，没有折叠的父级，但是它对DOM添加了不必要的标记，在父元素上使用 overflow：hidden; ，该元素包含按预期工作的浮动子元素。
 
 
 使用 overflow：hidden;  on  .wrapper  
 code> .wrapper {
 border：3px solid green; 
 overflow：hidden; 
} 
  
  演示  
 
 
 每当我们需要清除 $ c>  float 但是我用这个测试了各种情况下，它失败了一个特定的一个，它使用 box-shadow   演示   a>（无法看到所有四边的阴影， overflow：hidden; 导致此问题）
 
 
 所以现在怎么办？保存元素，没有 overflow：hidden; 所以去一个清除修复黑客，使用下面的代码片段在CSS中，就像你使用 overflow ：hidden; 为父元素，调用父元素上的类以自我清除.. 
  .clear：after {
 clear：both; 
 content：; 
 display：table; 
} 
 
< div class =wrapper clear> 
<！ - 浮动元素 - > 
< / div> 
     
 
 
 在这里，阴影按预期工作，同样，它自我清除父元素，防止崩溃.. 
 
 
 最后，我们在清除浮动元素后使用页脚。
 
 
   演示  
 
 
 
 
 
 当 float：none; 时使用，因为它是默认的，所以任何用于声明 float：none ; ？
 
 
 这取决于，如果你要一个响应式设计，你会使用这个值多次你的浮动元素以一定的分辨率渲染另一个。因为 float：none; 属性在那里起着重要作用。
 
 
 
 
 
 很少有真实世界的 float 例子。
 
 
  
 例如我们已经看到的是创建多个或多个列布局。
 
 使用 img  ，这将允许我们的内容流动。
 
 
 
 
   演示 （无浮动 img ）
 
 
   演示2  （ img 已悬停至 left ）
 
 
  
 使用 float 创建水平菜单 -   演示  
 
 
 
 
 
 
 
 浮动第二个元素，或使用`margin` 
 
 
  Last但也不是最少，我想解释这个特殊情况，你 float 只有一个元素到左不是 float 另一个，那么会发生什么？
 
 
 假设我们删除 float：right ; 从 .floated_right  类，  
 
 
 将从极限左 http://jsfiddle.net/Lmk9s/7/> 演示  
 
 
 在这种情况下，   float 转到左 
 
 
 您可以使用 margin-left ，它将等于左浮动列的大小 200px  wide 。
 
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? Any help would be much appreciated. Thanks!
<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 in 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 
                                        beside the top div. Why? Because 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 any 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, inorder 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 header, footer, and 2 columns, so here is what the blue print 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 the 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;
}
Lets go step by step with the layout and see how float works.. 

First off all, we use a main wrapper element, you can just assume that it's your viewport, than we use header and assign an 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 expanded, but it should right? Will come back to that in a while, for now, we have got a column floated to left.

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

Another colummn floated to the right

Here, we have a 300px wide column which we float to the right, which will sit besides 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 besides the left one.

Still the parent element is collapsed, well, lets 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 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 works as intended.

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

That saves us an element everytime 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 default, so any use to declare float: none;?

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



Few real world examples of how float is useful..


First example we already saw is to create multiple or more than multiple column layout.
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屋！

查看全文

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

问题描述

？

什么是float，它是什么？

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

How Does CSS Float Work?

What is float exactly and what does it do?

Float second element as well, or use `margin`

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

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

问题描述

？

什么是float，它是什么？

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

How Does CSS Float Work?

What is float exactly and what does it do?

Float second element as well, or use `margin`

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

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

登录关闭