如果包含浮动元素,为什么容器元素的高度不会增加？
Boy*_*smo 195 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>Mr.*_*ien 566
浮动元素不会增加容器元素的高度,因此如果不清除它们,容器高度不会增加......
我会直观地告诉你:
更多说明:
<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属性被引入以围绕图像流动文本,这些图像是浮动的left或right.这是 @Madara Uchicha 的另一个解释.那么,使用该
float属性并排放置盒子是错误的吗？答案是否定的 ; 如果您使用该float属性以便并排设置框,则没有问题.浮动一个
演示inline或一个block级别元素将使该元素的行为像一个inline-block元素.如果浮动元素
left或者right,该width元素将被限制在其持有,除非该内容width被明确定义...你不能
float一个元素center.这是我一直看到的初学者使用的最大问题float: center;float属性的有效值.float通常用于float将内容移动到最左侧或最右侧.只有4有效值float财产即left,right,none(默认)和inherit.父元素在包含浮动的子元素时会折叠,为了防止这种情况,我们使用
clear: both;属性来清除两侧的浮动元素,这将阻止父元素的折叠.有关更多信息,请参阅此处的另一个答案.(重要)想一想我们拥有各种元素的堆栈.当我们使用
float: left;或float: right;元素在堆栈上方移动一个.因此,正常文档流中的元素将隐藏在浮动元素后面,因为它位于正常浮动元素之上的堆栈级别.(请不要将其与此z-index完全不同.)
以一个案例为例来解释CSS浮动的工作原理,假设我们需要一个带有页眉,页脚和2列的简单2列布局,所以这里是蓝图的样子......
在上面的例子中,我们将浮动只有红色箱子,要么你可以float同时向left,或者你可以float上left,另一个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和分配height的50px所以没有什么花哨那里.它只是一个普通的非浮动块级元素,它将占用100%水平空间,除非它浮动或我们分配inline-block给它.
第一个有效值float是left在我们的例子中,我们使用float: left;for .floated_left,所以我们打算将一个块浮动到left我们的容器元素.
是的,如果你看到,父元素,它是.wrapper折叠的,你看到的绿色边框没有展开,但它应该是正确的？会在一段时间内再回过头来看,现在,我们已经有了一个专栏left.
来到第二列,让float这一个到了right
在这里,我们有一个300px宽列,我们float的right,因为它漂浮到这将坐在第一列的旁边left,而且因为它是浮动的left,它创建的空装订线right,并因为有充足的空间上right,我们right漂浮的元素完美地坐在旁边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在子元素上使用.
演示(无法看到所有4面的阴影,overflow: hidden;导致此问题)
所以现在怎么办？保存一个元素,不是overflow: hidden;那么明确修复hack,在CSS中使用下面的代码片段,就像你overflow: hidden;用于父元素一样,在父元素上调用class下面的元素来自我清除.
.clear:after {
clear: both;
content: "";
display: table;
}
<div class="wrapper clear">
<!-- Floated Elements -->
</div>
在这里,阴影按预期工作,它也会自动清除阻止崩溃的父元素.
最后,我们clear在浮动元素之后使用页脚.
什么时候float: none;使用,因为它是默认的,所以任何使用声明float: none;？
嗯,这取决于,如果您要进行响应式设计,当您希望浮动元素以特定分辨率在另一个下方渲染时,您将多次使用此值.因为那个float: none;地产在那里发挥了重要作用.
关于如何float有用的几个真实世界的例子.
- 我们已经看到的第一个示例是创建一个或多个列布局.
- 使用
img浮动内部p,这将使我们的内容流动.
演示(不浮动img)
演示2(img浮动到left)
- 使用
float用于创建水平菜单- 演示
浮动第二个元素,或使用`margin`
最后但并非最不重要,我想解释一下这个特殊情况,你float只有单个元素left而不是float另一个,那么会发生什么？
假设如果我们float: right;从我们中移除.floated_right class,div则将从极端渲染,left因为它没有浮动.
所以在这种情况下,要么你float将到left,以及
要么
您可以使用margin-left哪个等于左浮动列的大小,即200px宽.
- 浮点数不会影响块级父级的高度这一事实在规范中明确说明:http://www.w3.org/TR/CSS21/visudet.html#normal-block添加a的原因clearfix的工作原因是1)clearfix是(通常)在正常流程中2)清除浮动要求将clearfix放在浮动的最底部3)容器必须被拉伸以包含该clearfix. (3认同)
j08*_*691 35
您需要添加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>
- 这不是一个解决方案,你隐藏了从外部div走出界限的内容. (6认同)
- 在这个例子中没什么,但是如果你在内部div中引入了足够的内容是的. (3认同)
您遇到浮动错误(虽然我不确定它是否因为有多少浏览器出现此行为而在技术上是一个错误).以下是发生的事情:
在正常情况下,假设没有设置显式高度,块级元素(如div)将根据其内容设置其高度.父div的底部将延伸到最后一个元素之外.不幸的是,浮动元素会阻止父级在确定其高度时考虑浮动元素.这意味着如果您的最后一个元素是浮动的,它将不会像普通元素那样"拉伸"父元素.
空地
有两种常见的方法可以解决这个问题.第一个是添加"清除"元素; 也就是说,浮动的另一个元素将迫使父母伸展.所以添加以下html作为最后一个孩子:
<div style="clear:both"></div>
它不应该是可见的,并且通过使用clear:both,你确保它不会位于浮动元素的旁边,而是在它之后.
溢出:
大多数人(我认为)首选的第二种方法是更改父元素的CSS,以便溢出只是"可见".因此,将溢出设置为"隐藏"将强制父级伸出浮动子级的底部.只有当你没有在父母身上设置身高时才会这样.
就像我说的那样,第二种方法是首选的,因为它不需要你去为你的标记添加语义无意义的元素,但有时你需要overflow可见,在这种情况下添加一个清除元素是可接受的.