个人中心
gpt4 book ai didi

html - 如果容器元素包含 float 元素，为什么它的高度不会增加？

转载 作者：行者123 更新时间：2023-12-01 16:59:06 26 4
gpt4 key购买 nike

我想问一下高度和 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>

最佳答案

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

我将直观地向您展示:

enter image description here

enter image description here

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大多数初学者都误解了属性。那么，究竟是什么float做什么？最初，float引入了属性以在图像周围流动文本，这些图像是 float 的 left或 right . Here's another explanation来自@Madara Uchicha。那么，使用 float 是错误的吗？并排放置盒子的属性？答案是否 ;如果您使用 float 没有问题属性以便并排设置框。
  • float inline或 block level 元素将使元素表现得像 inline-block元素。 Demo
  • 如果你 float 一个元素 left或 right , width元素的内容将仅限于它所拥有的内容，除非 width明确定义...
  • 你不能float一个元素 center .这是我在初学者中遇到的最大问题，使用 float: center; ，这不是 float 的有效值属性(property)。 float一般用于float/将内容移动到最左边或最右边。 float 只有四个有效值属性(property)，即 left , right , none (默认)和 inherit .
  • 父元素折叠，当它包含 float 子元素时，为了防止这种情况，我们使用 clear: both;属性，清除两边 float 的元素，防止父元素折叠。有关更多信息，您可以引用我的另一个答案 here .
  • (重要)想想我们有一堆各种元素的地方。当我们使用 float: left;或 float: right;元素在堆栈上方移动一个。因此，普通文档流中的元素将隐藏在 float 元素后面，因为它位于普通 float 元素之上的堆栈级别。 (请不要将此与 z-index 联系起来，因为那是完全不同的。)


    • 以一个案例为例来解释CSS float 是如何工作的，假设我们需要一个简单的2列布局，有一个页眉、页脚和2列，那么这里是蓝图的样子……

    enter image description here

    在上面的例子中，我们将只 float 红色框，或者你可以 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;
    }

    让我们一步一步地进行布局，看看 float 是如何工作的。

    首先，我们使用主包装元素，您可以假设它是您的视口(viewport)，然后我们使用 header并分配一个 height的 50px所以没有什么特别的。它只是一个普通的非 float 块级元素，它将占用 100%水平空间，除非它是 float 的或者我们分配 inline-block到它。
    float 的第一个有效值是 left所以在我们的例子中，我们使用 float: left;为 .floated_left ，所以我们打算将一个块 float 到 left我们的容器元素。

    Column floated to the left

    是的，如果你看到了父元素，它是 .wrapper已折叠，您看到的带有绿色边框的那个没有展开，但应该对吧？过会儿会回到那个，现在，我们有一个列 float 到 left .

    来到第二列，让它 float这个给 right
    Another column floated to the right

    在这里，我们有一个 300px宽列我们 float到 right ，它将位于第一列旁边，因为它 float 到 left ，并且因为它 float 到 left ，它为 right 创建了空槽，而且由于 right 上有足够的空间, 我们的 right float 元素完美地坐在 left 旁边一。

    尽管如此，父元素还是折叠了，好吧，让我们现在解决这个问题。有很多方法可以防止父元素折叠。
  • 添加一个空的块级元素并使用 clear: both;在保存 float 元素的父元素结束之前，现在这是 clear 的廉价解决方案。您的 float 元素将为您完成这项工作，但我建议不要使用它。

    • 添加， <div style="clear: both;"></div>之前 .wrapper div结束，比如 
    <div class="wrapper clear">
        <!-- Floated columns -->
        <div style="clear: both;"></div>
    </div>

    Demo

    嗯，这修复得很好，不再有折叠的父级，但它向 DOM 添加了不必要的标记，所以有些人建议使用 overflow: hidden;在包含按预期工作的 float 子元素的父元素上。

    使用 overflow: hidden;在 .wrapper 
    .wrapper {
        border: 3px solid green;
        overflow: hidden;
    }

    Demo

    每次我们需要 clear 时，这都为我们节省了一个元素 float但是当我用这个测试了各种情况时，它在一个特定的情况下失败了，它使用了 box-shadow在子元素上。

    Demo (4边都看不到阴影， overflow: hidden;导致这个问题)

    那现在怎么办？保存一个元素，没有 overflow: hidden;所以去寻找一个明确的修复黑客，在你的 CSS 中使用下面的代码片段，就像你使用 overflow: hidden; 一样。对于父元素，调用 class下面对父元素进行自我清除。 
    .clear:after {
        clear: both;
        content: "";
        display: table;
    }

    <div class="wrapper clear">
        <!-- Floated Elements -->
    </div>

    Demo

    在这里，阴影按预期工作，而且它会自动清除防止折叠的父元素。

    最后，我们在 clear 之后使用页脚 float 元素。

    Demo

    什么时候 float: none;无论如何使用，因为它是默认值，所以任何使用声明 float: none; ?

    好吧，这取决于，如果您要进行响应式设计，当您希望 float 元素以特定分辨率呈现在另一个下方时，您将多次使用此值。为此 float: none;属性(property)在那里扮演着重要的 Angular 色。

    几个真实世界的例子 float很有用。
  • 我们已经看到的第一个示例是创建一个或多个列布局。
  • 使用 img飘在里面p这将使我们的内容能够流动。

    • Demo (无 float img)

    Demo 2 ( img float 到 left )
  • 使用 float用于创建水平菜单 - Demo


    • 也 float 第二个元素，或使用 `margin`

    最后但并非最不重要的一点，我想解释一下您 float 的特殊情况。只有单个元素到 left但你没有 float另一个，会发生什么？

    假设我们删除 float: right;来自我们的 .floated_right class , div将从极限渲染 left因为它不是 float 的。

    Demo

    所以在这种情况下，您可以 float the to the left as well

    要么

    您可以 use margin-left which will be equal to the size of the left floated column i.e 200px wide .

    关于html - 如果容器元素包含 float 元素，为什么它的高度不会增加？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16568272/

    26 4 0
    文章推荐： iphone - 为什么在使用 ARC + NSZombieEnabled 时对象没有被释放
    文章推荐： java - 如何制作可编辑的 SWT 组合，允许用户仅键入组合中的项目
    文章推荐： javascript - 如何比较谷歌电子表格中单元格之间的字符串数据？
    文章推荐： java - while 循环只循环一次 - java
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com