CSS浮动说明 [英] CSS Float explanation
问题描述
CSS Float使我疯了，可以解释下面的情况吗？
CSS Float is making me crazy, can any one explain the following situation?
如何重现：只需复制以下代码片段
How to reproduce: just copy following code snippet from
http://www.w3schools.com/css /tryit.asp?filename=trycss_float_clear
为什么清除：两个无效？ / p>
Why without clear:both is not working?
<html>
<head>
<style type="text/css">
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
.text_line
{
display:block;
height:90px;
width:300px;
margin:0px;
background-color:red;
}
</style>
</head>
<body style="display:block">
<h3>Image Gallery</h3>
<p>Try resizing the window to see what happens when the images does not have enough room.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<p class="text_line">a</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>
推荐答案
浮动块元素时，浏览器将其放置在上一个浮动对象的旁边，只要容器足够宽（否则它会下降到上一个对象下面）。
When you float a block element, you are telling the browser to position it next to the previous floated object, so long as the container is wide enough (otherwise it will drop below the previous object).
，你基本上把它从文档流。浮动对象是父容器的一部分，但它的框模型样式（宽度，高度等）不会计算到父容器中。因此，如果父容器中有一堆浮动元素，它的height将等于零（如果height不固定），因为浮动元素的高度被忽略。
When you float an object, you are essentially taking it out of the document flow. A floated object is part of the parent container, but it's box model styling (width, height etc.) is not calculated into the parent container. So if a parent container has a bunch of floated elements in it, it's height will be equal to zero (if height is not fixed), because the height of the floated element is ignored.
要解决这个问题，您需要清除浮动，这基本上意味着订单将被恢复。
To fix this, you need to clear the floats, which basically means order will be restored.
使用clear：both;在父容器的底部，或将此clearfix类放在父容器上：
Either put a div with clear:both; in the bottom of the parent container, or put this clearfix class on the parent container:
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
这是一个残酷的简化说明。有关浮动和清除的详情，请参阅： http：//dev.opera。 com / articles / view / 35-float-and-clearing /
This has been a brutally simplified explanation. Read more about floats and clearing here: http://dev.opera.com/articles/view/35-floats-and-clearing/
这篇关于CSS浮动说明的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
