Question

我正在学习HTML5和CSS 3（新手）。当我在书中看到一个例子时，我遇到了渲染问题。

我想做什么： 创建一个虚拟列。

工作样本：

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: #fff;
            }
            .container::after{
                content: ' ';
                clear: both;
                display: block;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

运行脚本，您可以看到两列。

现在运行此脚本，

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: #fff;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

为什么上面没有呈现？

我做错了什么？
另外，在工作样本中，::after是什么？
在工作示例中CSS内容：'';为什么会这样？
CSS工作样本实际上做了什么？

根据一些评论，我只是更改了父容器中的颜色。

<!doctype html>
<html>
    <head>
        <title>Faux Columns</title>
        <style>
            .container{
                background: black;
                color: red;
            }
            .col{
                float: left;
                width: 50%;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <aside class="col">
                Aside
            </aside>
            <div class="col main">
                Main Content Area
            </div>
        </div>
    </body>
</html>

现在我可以看到两列。但父母的背景颜色为黑色未设置。

Answer 1

您可以在<div style="clear:both;"></div>元素后添加.col.main，或将overflow: auto;添加到.container

Answer 2

将float添加到内部div时，外部div会崩溃。

在工作示例中，您使用了一种名为clearfix的技术来清除floats。

.container::after{
  content: ' ';
  clear: both;
  display: block;
}

您正在为伪元素:after设置样式，该元素位于浮动div之后。

要在页面中显示:after，应指定content。在这种情况下，会给出银行内容。

第二个代码的解决方案。

同时使用float:left到外部div。

.container { 向左飘浮; 宽度：100％; }
将overflow属性用于外部div。

.container { 溢出：自动; }
在第一段代码中使用clearfix。

Answer 3

页面未呈现的原因是

.container::after{
    content: ' ';
    clear: both;
    display: block;
}

css中的content元素使用:: after伪元素来插入生成的内容。在这种情况下，这意味着它将它放在页面上。您可以在W3schools了解有关此元素以及更多html / css元素的更多信息。

:: after伪元素匹配所选元素的虚拟最后一个子元素。简单来说，这意味着您可以将内容插入到页面中，而不必在html中执行此操作。如果您有一个单独的CSS文件，您可以使用:: after在html之后插入内容。在同一个注释中，除了在html之前插入内容之外，还有:: before伪元素做了很多相同的事情。如果您想了解更多关于:: after伪元素的信息，我建议您查看The Mozilla docs on it。

接下来是clear属性，此属性允许您选择允许元素属性的哪些边浮动。确保某些元素在页面上正确对齐非常有用。您可以再次在W3schools了解更多相关信息

要将所有内容放在一起，工作css在使用:: after和content的html之后将容器类插入到页面中。然后clear都指定没有元素可以在容器类的任何一侧浮动。最后，您的内容在显示块中对齐。

Answer 4

问题是浮动框don't take up space on the parent unless you clear them。在您的第一个示例中，您将使用以下方法清除它：

.container::after{
  content: ' ';
  clear: both;

＆＃13;

<!doctype html>
<html>

<head>
  <title>Faux Columns</title>
  <style>
    .container {
      background: black;
      color: white;
    }
    .col {
      float: left;
      width: 50%;
    }
  </style>
</head>

<body>
  <div class="container">
    <aside class="col">
      Aside
    </aside>
    <div class="col main">
      Main Content Area
    </div>
    <div style="clear: both;"></div>      
  </div>
</body>

</html>

＆＃13;

Answer 5

浮动元素的行为与非浮动元素不同 - ＆gt;它们的存在并不能确定容器（父元素）的尺寸。

因此，在第二个例子中，你的.container div有0px x 0px，你看不到任何东西，因为一切都是白色的（.container黑色背景不可见）。

样式.container：告诉浏览器.container应该拉伸以包含所有元素（甚至浮动的元素）。关于这种'clearfix'是什么以及什么时候应该使用它们有great question。

Answer 6

CSS clearfix

.container::after{
content: ' ';
clear: both;
display: block;
}

很有用，但它（理想情况下）应该是可选的，列应该以相同的方式显示，无论是否包含clearfix。

要包含clearfix可选项，样式声明应为：

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}

.container::after {
content: ' ';
clear: both;
display: block;
}

现在，即使您删除clearfix，列仍将以相同的方式显示。

带 clearfix的版本

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}

.container::after {
content: ' ';
clear: both;
display: block;
}

<div class="container">
<aside class="col">Aside</aside>

<div class="col main">Main Content Area</div>
</div>

没有 clearfix的版本

.container .col {
float: left;
width: 50%;
background: black;
color: #fff;
}

<div class="container">
<aside class="col">Aside</aside>

<div class="col main">Main Content Area</div>
</div>

Answer 7

这只是你的文字颜色。在第一个示例中，您有黑色背景。将#fff更改为＃000，或删除'color：#fff;'。

页面呈现为空。为什么呢？

7 个答案:

第二个代码的解决方案。