Question

CSS Float让我发疯，任何人都可以解释以下情况吗？

如何重现：只需从

复制以下代码段即可

http://www.w3schools.com/css/tryit.asp?filename=trycss_float_clear

为什么没有clear:both不起作用？

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

Answer 1

当你浮动一个块元素时，你告诉浏览器将它放在前一个浮动对象的旁边，只要容器足够宽（否则它将落在前一个对象下面）。

浮动对象时，基本上是将其从文档流中取出。浮动对象是父容器的一部分，但它的盒子模型样式（宽度，高度等）不计算到父容器中。因此，如果父容器中有一堆浮动元素，它的高度将等于零（如果高度不固定），因为浮动元素的高度将被忽略。

要解决此问题，您需要清除浮动，这基本上意味着将恢复订单。

要么把一个明确的div：两个;在父容器的底部，或将此clearfix类放在父容器上：

/* 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-floats-and-clearing/

Answer 2

只需将clear:both放回（在.text_line中）

CSS Float解释

2 个答案: