CSS浮动如何工作？

Question

我想问一下身高和浮力是如何工作的。我有一个外部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>

Answer 1

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

我会直观地告诉你：

enter image description here

更多说明：

<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。 Here's another explanation来自@Madara Uchicha。

那么，使用float属性并排放置框是不是错了？答案是否;如果您使用float属性来并排设置框，则没有问题。
浮动inline或block级别元素会使该元素的行为类似于inline-block元素。
{{3} }
如果您浮动元素left或right，则元素的width将仅限于其保留的内容，除非明确定义width ...
您不能float元素center。这是我在初学者中经常看到的最大问题，使用 ~~float: center;~~ ，这不是float属性的有效值。 float通常用于float /将内容移至 left 或 right 。 float属性只有四个有效值，即left，right，none（默认）和inherit。
父元素在包含浮动的子元素时会折叠，为了防止这种情况，我们使用clear: both;属性来清除两边的浮动元素，将阻止父元素的折叠。有关详细信息，请参阅我的另一个答案Demo。
（重要）想一想我们拥有各种元素的堆栈。当我们使用float: left;或float: right;时，元素在堆栈上方移动一个。因此，正常文档流中的元素将隐藏在浮动元素后面，因为它位于正常浮动元素之上的堆栈级别。 （请不要将此与z-index相关联，因为这完全不同。）

以一个案例为例来解释CSS浮动的工作方式，假设我们需要一个带有页眉，页脚和2列的简单2列布局，所以这里的蓝图就是这样......

enter image description here

在上面的示例中，我们只会浮动红色框，您可以float同时left，也可以float转到left，另一个来自right，取决于布局，如果是3列，您可以float 2列到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;
}

让我们一步一步地进行布局，看看浮点运算是如何运作的。

首先，我们使用主包装元素，您可以假设它是您的视口，然后我们使用header并分配height 50px所以没有什么花哨的。它只是一个普通的非浮动块级元素，除非它浮动或我们为其分配100%，否则它将占用inline-block个水平空间。

float的第一个有效值为left所以在我们的示例中，我们将float: left;用于.floated_left，因此我们打算将一个块浮动到{{1}我们的容器元素。

here

是的，如果你看到，left的父元素已折叠，那么你看到的带有绿色边框的元素并没有展开，但它应该是正确的吗？将在一段时间内再回过头来看，现在，我们已经将一个列浮动到.wrapper。

来到第二列，让left这一列到float

Column floated to the left

在这里，我们有一个right宽列我们300px到float，它将位于第一列旁边，因为它已浮动到{{1} }，并且由于它浮动到right，它为left创建了一个空的排水沟，由于left上有足够的空间，我们right } floated element完全位于right之后。

尽管如此，父元素已经崩溃，现在让我们解决这个问题。有许多方法可以防止父元素崩溃。

添加一个空的块级元素，并在父元素结束之前使用right，它保存浮动元素，现在这个是left您的浮动元素的廉价解决方案，它将为您完成工作但是，我建议不要使用它。

在clear: both; clear结束之前添加<div style="clear: both;"></div>，例如

.wrapper

Another column floated to the right

嗯，修复得很好，没有折叠的父级，但是它会给DOM添加不必要的标记，所以有人建议，在父元素上使用div来保存浮动子元素，这些元素按预期工作。

在<div class="wrapper clear">  <div style="clear: both;"></div> </div>

上使用overflow: hidden;

overflow: hidden;

Demo

每次我们需要.wrapper .wrapper { border: 3px solid green; overflow: hidden; }时，我们就会为我们节省一个元素，但是当我用这个来测试各种情况时，它在一个特定的情况下失败了，它在子元素上使用了clear

Demo（无法看到所有四边的阴影，float会导致此问题）

那么现在呢？保存一个元素，没有box-shadow所以请选择明确的修复方法，在CSS中使用以下代码段，就像使用overflow: hidden;作为父元素一样时，请调用下面的overflow: hidden;自我清除的父元素。

overflow: hidden;

Demo

这里，阴影按预期工作，它也会自动清除阻止崩溃的父元素。

最后，我们在class浮动元素之后使用页脚。

Demo

什么时候使用.clear:after { clear: both; content: ""; display: table; } <div class="wrapper clear">  </div>，因为它是默认值，所以用于声明clear？

嗯，这取决于，如果您要进行响应式设计，当您希望浮动元素以特定分辨率在另一个下方渲染时，您将多次使用此值。因为float: none;属性在那里起着重要的作用。

很少有关于float: none;如何有用的真实例子。

我们已经看到的第一个示例是创建一个或多个列布局。
在float: none;内使用float，这样可以让我们的内容流动。

Demo（不浮动img）

Demo（p浮动到img）

使用img创建水平菜单 - Demo 2

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

最后但并非最不重要，我想解释一下这种特殊情况，即你left只有float的单个元素但你没有float，所以会发生什么？< / p>

假设我们从left float移除float: right;，.floated_right将从极端class呈现，因为它不会浮动。

Demo

所以在这种情况下，你可以Demo

OR

你可以float the to the left as well。

Answer 2

您需要将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>

<强> jsFiddle example

Answer 3

您遇到浮动错误（虽然我不确定它是否因为有多少浏览器出现此行为而在技术上是一个错误）。以下是发生的事情：

在正常情况下，假设没有设置显式高度，块级元素（如div）将根据其内容设置其高度。父div的底部将延伸到最后一个元素之外。不幸的是，浮动元素会阻止父级在确定其高度时考虑浮动元素。这意味着如果你的最后一个元素被浮动，它将不会像普通元素那样“拉伸”父元素。

<强>清除

有两种常见的方法可以解决这个问题。第一个是添加“清除”元素;也就是说，浮动的另一个元素将迫使父母伸展。因此，将以下html添加为最后一个子项：

<div style="clear:both"></div>

它不应该是可见的，并且通过使用clear：both，你确保它不会位于浮动元素的旁边，而是在它之后。

<强>溢出：

大多数人（我认为）首选的第二种方法是更改父元素的CSS，以便溢出只是“可见”。因此，将溢出设置为“隐藏”将强制父级伸出浮动子级的底部。仅当您没有在父级上设置高度时才会这样。

就像我说的那样，第二种方法是首选方法，因为它不需要你向标记添加语义无意义的元素，但有时你需要overflow可见，在这种情况下添加清算元素是可以接受的。

Answer 4

因为div的浮动。在外部元素上添加overflow: hidden。

<div style="overflow:hidden; margin:0 auto;width: 960px; min-height: 100px; background-color:orange;">
    <div style="width:500px; height:200px; background-color:black; float:right">
    </div>
</div>

Demo

Answer 5

当存在浮动元素时，您会混淆浏览器呈现元素的方式。如果一个块元素是浮动的（在您的情况下是您的内部div），则其他块元素将忽略它，因为浏览器从网页的正常流中删除浮动元素。然后，因为浮动的div已从正常流中移除，所以外部div被填充，就像内部div不存在一样。但是，内联元素（图像，链接，文本，黑色引用）将遵循浮动元素的边界。如果你在外部div中引入文本，文本将放置arround de inner div。

换句话说，块元素（标题，段落，div等）忽略浮动元素和填充，内联元素（图像，链接，文本等）尊重浮动元素的边界。

An fiddle example here

<body>
    <div style="float:right; background-color:blue;width:200px;min-height:400px;margin-right:20px">
           floating element
    </div>
    <h1 style="background-color:red;"> this is a big header</h1>
    <p style="background-color:green"> this is a parragraph with text and a big image. The text places arrounds the floating element. Because of the image is wider than space between paragrah and floating element places down the floating element. Try to make wider the viewport and see what happens :D
        <img src="http://2.bp.blogspot.com/_nKxzQGcCLtQ/TBYPAJ6xM4I/AAAAAAAAAC8/lG6XemOXosU/s1600/css.png">
     </p>

Answer 6

如果你没有任何div显示在容器上，你可以使用overflow属性到容器div，例如：

<div class="cointainer">
    <div class="one">Content One</div>
    <div class="two">Content Two</div>
</div>

以下是css：

.container{
    width:100%;/* As per your requirment */
    height:auto;
    float:left;
    overflow:hidden;
}
.one{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

.two{
    width:200px;/* As per your requirment */
    height:auto;
    float:left;
}

----------------------- OR ----------------------- -------

    <div class="cointainer">
        <div class="one">Content One</div>
        <div class="two">Content Two</div>
        <div class="clearfix"></div>
    </div>

以下是css：

    .container{
        width:100%;/* As per your requirment */
        height:auto;
        float:left;
        overflow:hidden;
    }
    .one{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }

    .two{
        width:200px;/* As per your requirment */
        height:auto;
        float:left;
    }
    .clearfix:before,
    .clearfix:after{
        display: table;
        content: " ";
    }
    .clearfix:after{
        clear: both;
    }

Answer 7

如果你需要让你的孩子div漂浮到左边，我推荐下面的代码给你的父div。

.parent_div{
    display: flex;
}

Answer 8

使用 <div style="clear: both;"></div>位于所有代码的底部，但高于</body></html>

只需复制并粘贴

即可

它将起作用

如果包含浮动元素，为什么容器元素的高度不会增加？

8 个答案:

CSS浮动如何工作？

究竟什么是浮动，它做什么？

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