小编典典

如果容器元素包含浮动元素,为什么高度不增加?

html

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

阅读 329

收藏
2020-05-10

共1个答案

小编典典

float大多数初学者都误解了该属性。好吧,到底是做float什么的?最初,float引入了该属性,以使文字围绕图像浮动left或浮动right。这是 @Madara Uchicha 的另一种解释。因此,使用该float属性并排放置盒子是否错误?答案是否定的。如果使用该float属性来并排设置框,则没有问题。

  • 浮动元素inline或block水平元素将使元素的行为类似于inline-block元素。
    演示版

  • 如果浮动元素left或right,则width除非width明确定义,否则该元素的仅限于其持有的内容……

  • 你不能有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。

第一个有效的值floatleft如此在我们的例子中,我们使用float: left;.floated_left,因此,我们打算在块浮动到left我们的容器元素。

列浮动到左侧

是的,如果您看到.wrapper折叠的父元素,则看到的带有绿色边框的那个元素没有展开,但这应该对吗?稍后,现在将回到列left。

进入第二列,让它float进入right

另一列浮动在右侧

在这里,我们有一个300px宽列,我们floatright,当它浮动到时,它将位于第一列旁边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子元素的一个特定案例中失败了。

演示(无法看到所有四个侧面的阴影,overflow: hidden;导致此问题)

所以现在怎么办?保存一个元素,不行overflow: hidden;,进行明确的修复,在CSS中使用以下代码段,就像overflow:hidden;对父元素一样,class对父元素进行以下调用以自清除。

.clear:after {
    clear: both;
    content: "";
    display: table;
}

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

在这里,阴影可以按预期工作,并且可以自动清除防止崩溃的父元素。

最后,我们clear在浮动元素之后使用页脚。

float: none;无论如何,都是使用when ,因为它是默认值,所以可以用来声明float: none;

好吧,这取决于是否要进行响应式设计,当您希望浮动元素以某个分辨率在另一个元素下方进行渲染时,会多次使用此值。因为那里的float: none;财产起着重要的作用。

实际例子中很少float有有用的例子。

我们已经看到的第一个示例是创建一个或多个列布局。img在内部使用float p可以使我们的内容四处流通。演示(无浮动img)

演示2(img浮动到left)

使用float用于创建水平菜单- 演示还是浮动第二个元素,还是使用 margin最后但并非最不重要的一点,我想解释一下这种特殊情况,其中您float仅将元素分配给,left而您没有float其他元素,那么会发生什么呢?

假设如果我们float: right;从中移除.floated_right class,则div它将呈现为极端,left因为它没有浮动。

所以在这种情况下,要么你可以float在给left为好

要么

您可以使用margin-left它将等于左浮动列的大小,即200pxwidth

2020-05-10