为什么如果容器元素包含浮动元素,它的高度不会增加? [英] Why doesn't the height of a container element increase if it contains floated elements?
问题描述
我想问一下身高和浮子的工作原理。我有一个外部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
属性来流动图像周围的文本,浮动左
或右
。
是的,如果你看到,父元素,
.wrapper
折叠,你看到一个绿色边框没有扩大,但它应该正确吗?现在,我们有一列浮动到左
。
到第二列,让它
float
这一个到右
这里,我们有一个
300px
宽列,我们float
到/ code>,它将位于第一列之外,因为它悬浮到
左
,并且因为它浮动到左
,它为right
创建了空格,并且由于right
有足够的空格,我们right
浮动元素完美除了左
之一。
仍然是父元素折叠,好吧,让我们现在解决。有许多方法可以防止父元素折叠。
- 添加一个空的块级元素并使用
clear :both;
在父元素结束之前,它保存浮动的元素,现在这个是清除
添加,
< div style =clear : c> 之前的 c: ,如
< div class =wrapper clear>
<! - 浮动列 - >
< div style =clear:both;>< / div>
< / div>
很好,修复效果非常好,没有折叠的父级, DOM,所以一些建议,使用
overflow:hidden;
在父元素上保持浮动的子元素,按预期工作。
使用
overflow:hidden;
.wrapper
.wrapper {
border:3px solid green;
overflow:hidden;
}
每当我们需要
清除
float
但是当我用这个测试各种情况下,它失败了一个特定的一个,它使用box-shadow
演示 (无法在四面都看到阴影,
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
浮动到左
)
- 使用
float
创建水平菜单 - 演示
浮动第二个元素, margin |
最后但并非最不重要的,我想解释一下这个特殊情况,你
float
left
但你不float
另一个,那么会发生什么?
假设我们从
.floated_right
类中删除
,float:right;
div
将从极限向左
呈现,因为它不是浮动的。 / p>
因此,在这种情况下,您可以
float
到左
以及
OR
您可以使用
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? 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 useclear: 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 doesfloat
do? Initially, thefloat
property was introduced to flow text around images, which are floatedleft
orright
. 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 thefloat
property in order to set boxes side by side.Floating an
Demoinline
orblock
level element will make the element behave like aninline-block
element.If you float any element
left
orright
, thewidth
of the element will be limited to the content it holds, unlesswidth
is defined explicitly ...You cannot
float
an elementcenter
. This is the biggest issue I've always seen with beginners, using, which is not a valid value for thefloat: center;
float
property.float
is generally used tofloat
/move content to the very left or to the very right. There are only four valid values forfloat
property i.eleft
,right
,none
(default) andinherit
.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;
orfloat: 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 toz-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 theleft
, or you canfloat
on toleft
, and another toright
as well, depends on the layout, if it's 3 columns, you mayfloat
2 columns toleft
where the another one to theright
so depends, though in this example, we have a simplified 2 column layout so willfloat
one toleft
and the other to theright
.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 anheight
of50px
so nothing fancy there.. It's just a normal non floated block level element which will take up100%
horizontal space unless it's floated or we assigninline-block
to it.The first valid value for
float
isleft
so in our example, we usefloat: left;
for.floated_left
, so we intend to float a block to theleft
of our container element.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 toleft
.Coming to second column, lets it
float
this one to theright
Another colummn floated to the right
Here, we have a
300px
wide column which wefloat
to theright
, which will sit besides the first column as it's floated to theleft
, and since it's floated to theleft
, it created empty gutter to theright
, and since there was ample of space on theright
, ourright
floated element sat perfectly besides theleft
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 toclear
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>
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; }
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 usesbox-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 useoverflow: hidden;
for the parent element, call theclass
below on the parent element to self clear...clear:after { clear: both; content: ""; display: table; } <div class="wrapper clear"> <!-- Floated Elements --> </div>
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.
When is
float: none;
used anyways, as it is default, so any use to declarefloat: 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 insidep
which will enable our content to flow around.
Demo (Without floating
img
)Demo 2 (
img
floated to theleft
)- 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 theleft
but you do notfloat
the other, so what happens?Suppose if we remove
float: right;
from our.floated_right
class
, thediv
will be rendered from extremeleft
as it isn't floated.So in this case, either you can
float
the to theleft
as wellOR
You can use
margin-left
which will be equal to the size of the left floated column i.e200px
wide.这篇关于为什么如果容器元素包含浮动元素,它的高度不会增加?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
- 添加一个空的块级元素并使用