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

推荐答案

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

我将直观地向您展示:

在此处输入图像描述

在此处输入图像描述

在此处输入图像描述

更多解释:

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

How Does CSS Float Work?

浮动到底是什么?它是做什么的?

  • float属性被大多数初学者误解了.float到底是做什么的?最初,float属性用于在图像周围流动文本,这些图像浮动为leftright.Here's another explanation人@Madara Uchicha.

    那么,使用float属性并排放置箱子有错吗?答案是no;如果您使用float属性来并排放置方框,则没有问题.

  • 浮动inlineblock级别的元素将使该元素的行为类似于inline-block元素.

    Demo

  • 如果浮动一个元素leftright,元素的width将被限制为它所包含的内容,除非明确定义了width...

  • 不能对元素center执行float.这是我在初学者中经常遇到的最大问题,使用float: center;,这不是float属性的有效值.float通常用于将内容移动到leftright.float个属性只有four个有效值,即leftrightnone(默认值)和inherit.

  • 父元素折叠,当它包含浮动的子元素时,为了防止这种情况,我们使用clear: both;属性来清除两侧的浮动元素,这将防止父元素折叠.更多信息,请参考我的另一个答案here.

  • (Important)想象一下,我们有一堆不同的元素.当我们使用float: left;float: right;时,元素在堆栈上方移动1.因此,正常文档流中的元素将隐藏在浮动元素后面,因为它位于正常浮动元素之上的堆栈级别.(Please don't relate this to 102 as that is completely different.)


以一个 case 为例来解释CSS浮动是如何工作的,假设我们需要一个简单的两列布局,带有页眉、页脚和两列,那么下面是蓝图的样子...

在此处输入图像描述

在上面的示例中,我们将仅浮动红色框,您可以同时使用floatleft,或者可以同时使用floatleftright,这取决于布局,如果是3列,您可以选择float 2列到left,而另一列是right,因此取决于布局,不过在本例中,我们有一个简化的2列布局,所以float的布局是1到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,分配height50px,所以没有什么特别的.它只是一个普通的非浮动块级元素,它将占据100%个水平空间,除非它是浮动的,或者我们为它指定inline-block.

float的第一个有效值是left,所以在我们的示例中,我们使用float: left;表示.floated_left,所以我们打算将一个块浮动到容器元素的left.

Column floated to the left

是的,如果你看到,父元素是.wrapper,它被折叠了,你看到的带有绿色边框的元素没有展开,但它应该是对的?过一段时间我们会回到这一点,现在,我们有一个专栏浮动到left.

来到第二列,让它把这一列变成right

Another column floated to the right

在这里,我们有一个300px宽的柱子,我们从floatright,当它漂浮到left时,它会坐在第一根柱子旁边,因为它漂浮到left,它创造了right的空排水沟,因为right上有足够的空间,我们的right漂浮元素完美地坐在left旁边.

尽管如此,父元素还是被折叠了,好吧,让我们现在修复它.有很多方法可以防止父元素折叠.

  • 添加一个空的块级元素,在父元素结束之前使用clear: both;,它保存浮动元素,现在这个是clear浮动元素的廉价解决方案,它将为您完成任务,但我建议不要使用这个.

.wrapper div结束前加<div style="clear: both;"></div>,就像

<div class="wrapper clear">
    <!-- Floated columns -->
    <div style="clear: both;"></div>
</div>

Demo

这很好地解决了这个问题,不再有折叠的父元素,但它给DOM添加了不必要的标记,所以一些人建议,在父元素上使用overflow: hidden;,以保存按预期工作的浮动子元素.

.wrapper上使用overflow: hidden;

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

Demo

每当我们需要clearfloat的时候,这就为我们节省了一个元素,但是当我用它测试各种情况时,它在一个特定的情况下失败了,它在子元素上使用了box-shadow.

Demo(四面都看不到阴影,overflow: hidden;导致此问题)

那现在怎么办?保存一个元素,不是overflow: hidden;,所以使用清除修复方法,在CSS中使用下面的代码片段,就像您为父元素使用overflow: hidden;一样,调用下面的class来清除父元素.

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

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

Demo

在这里,阴影按预期工作,而且它会自动清除父元素,从而防止崩溃.

最后,我们在clear个浮动元素后使用页脚.

Demo


不管怎样,什么时候使用float: none;,因为它是默认值,所以有没有必要声明float: none;

好吧,这取决于,如果你想要一个响应性设计,你会多次使用这个值,当你想要你的浮动元素以一定的分辨率呈现一个低于另一个的时候.因此,float: none;房产在那里扮演着重要的角色.


很少有真实世界的例子说明float是多么有用.

  • 我们已经看到的第一个例子是创建一个或多个列布局.
  • 使用漂浮在p内部的img,这将使我们的内容能够四处流动.

Demo(无浮动img)

Demo 2(img浮动到left)

  • 使用float创建水平菜单-Demo

也可以浮动第二个元素,或者使用`边距'`

最后但并非最不重要的一点是,我想解释一下这个特殊的情况,在left中只有一个元素是float,而另一个元素没有float,那么会发生什么呢?

假设我们从.floated_right class中删除float: right;,div将从Extreme left渲染,因为它不是浮动的.

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相关问答推荐

如何在按钮的中心添加两条线

是否可以在不改变其位置的元素的情况下删除内联元素?

如何将导出按钮添加到 html/jquery 数据表代码?

如何将容器的原点更改为其中的元素

如何避免中断的 CSS 动画

如何将按钮放置在 div 的角落?

如何在 flex 容器中左对齐图像?

为什么 Bootstrap 折叠功能不起作用?

如何为表情符号使用不同的样式?

::selection在换行时无法正常工作

有序列表 1, 1.1, a

如何使标题响应?

使用 Bootstrap 的显示属性 d-none d-md-block 和 d-flex 冲突

Vue.js 在@change 上获得选定的选项

Favicon Standard - 2022 - svg、ico、png 和尺寸?

Angular 5 FormGroup 重置不会重置验证器

Flexbox:每行 4 个项目

无法在 HTML 中接近 Typescript 枚举

指向特定 whatsapp 联系人的 Web 链接