Question

根据这个网站

https://www.w3schools.com/html/html_blocks.asp

div是一个块元素，“块级元素总是从一个新行开始，占用可用的全宽（尽可能向左和向右延伸）。”

那为什么这段代码不会使页面的上半部分变成红色？：

<!DOCTYPE html>
<html lang="de">
    
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="pragma" content="no-cache">
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    
    <style type="text/css">
    
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            background-color: grey;
        }
    
    
    </style>
    
    
</head>
    
<body>
    
    
    <div style="background: red;float: left; height: 20%;"></div>
    
    
</body>
</html>

当我将“width = 100％”添加到div的样式时，如果没有该变量，我会得到我的期望。为什么它不能自行延伸？

Answer 1

漂浮的空div没有高度或宽度。

你给它一个高度，但它仍然没有宽度。只有当它也有宽度（或某些内容）时才会看到它。

您引用的默认块行为不适用于浮动元素。

Answer 2

因为那里有Codice cliente denominazione c00106 Paolo re c00116 viglino arturo c00126 sellaro giuseppe c00146 accusani fabio c00161 franconi srl（只取其内容的宽度而且无论如何都不会有100％的宽度） - 只需删除它：

＆＃13;

float: left

＆＃13;

Answer 3

为了拉伸浮动的div元素，必须明确说明其宽度的样式。如果您忽略指定它，那么浏览器只会根据需要对其进行扩展。因此，将width="100%"添加到DIV标记或将width:100%添加到其样式是选项，以便浮动div占用整个宽度，即使它缺少内容。

OP引用的来源适用于＆＃34; unloated＆＃34; div元素。但是，正如OP的CSS代码中那样，浮动的div不符合MDN的通常规则：

...该元素取自网页的正常流程仍然是流程的一部分...

在这种特殊情况下，由于OP表明浮动的div应该完全伸展，所以div浮动似乎是多余的;除非OP期望宽度在某个时刻动态变化，否则应该删除float属性。

延伸div元素的另一种方法是将此CSS添加到其样式中：display:flex创建flex box。

＆＃13;

<!DOCTYPE html>
<html lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <meta http-equiv="pragma" content="no-cache">
  <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">

  <style type="text/css">
    html,
    body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background-color: grey;
    }
    div {
    background: red; 
    height: 20%;
    display:flex;
    }
  </style>


</head>

<body>


  <div></div>


</body>

</html>

＆＃13;

注意：虽然我删除了弹性框的浮动属性，但您可以保留它，因为它对弹性框没有影响。

HTML：div没有延伸？

3 个答案: