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

我正在学习HTML5和CSS3（新手）。当我阅读一本书中的一个例子时，我遇到了一个渲染问题

我想做的是： 创建一个人造柱

工作样本：

人造柱
.集装箱{
背景：黑色；
颜色：#fff；
}
.容器：：之后{
内容：''；
明确：两者皆有；
显示：块；
}
上校{
浮动：左；
宽度：50%；
}
在一边
主要内容区

这只是你的文本颜色。在第一个示例中，您有一个黑色背景。将#fff更改为#000，或删除“color:#fff；”

您可以在

.col.main

元素之后添加

，或者添加

溢出：自动

到

.container

问题在于浮动的箱子。在第一个示例中，您使用以下方法清除它：

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

人造柱
.集装箱{
背景：黑色；
颜色：白色；
}
上校{
浮动：左；
宽度：50%；
}
在一边
主要内容区

浮动元素的行为不同于非浮动元素->它们的存在不确定容器（父元素）的维度

因此，在第二个示例中，.container div有0px x 0px，您看不到任何内容，因为所有内容都是白色的（.container黑色背景不可见）

---

styleing.container:after告诉浏览器.container应该拉伸以包含所有元素（即使是浮动的元素）。关于这种“clearfix”是什么以及什么时候应该使用它们，有很多问题需要解决。

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{
浮动：左；
宽度：50%；
背景：黑色；
颜色：#fff；
}
.容器：：之后{
内容：''；
明确：两者皆有；
显示：块；
}

在一边
主要内容区

向内部div添加

float

时，外部的

div

折叠

在工作示例中，您正在使用一种称为

clearfix

的技术来清除

浮动

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

您正在设置伪元素
：after
（位于浮动div之后）的样式

要使
：在页面中可见
之后，应指定
内容。在这种情况下，将给出银行内容


第二个代码的解决方案。
也可使用
float:left
到外部
div

.集装箱{
浮动：左；
宽度：100%；
}

对外部div使用
overflow
属性

.集装箱{
溢出：自动；
}

在第一个代码中使用
clearfix

页面未呈现的原因是

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

css中的content元素使用：：after伪元素插入生成的内容。在这种情况下，这意味着它会把它放在页面上。您可以阅读更多关于此元素和更多html/css元素的信息

:：after伪元素与所选元素的虚拟最后一个子元素匹配。更简单地说，这意味着您可以将内容插入页面，而无需使用html。如果您有一个单独的CSS文件，那么可以使用：：after在html之后插入内容。同样值得注意的是，还有：：before伪元素，除了在html之前插入内容外，它做的事情基本相同。如果您想了解更多关于：：after伪元素的信息，我建议您签出

接下来是clear属性，该属性允许您选择允许元素属性浮动的边。确保页面上的某些元素正确对齐非常有用。再一次，你可以在学校里读到更多关于这方面的内容

为了将它们放在一起，工作css使用：：after和content将容器类插入到html之后的页面中。然后清除这两个指定容器类的任一侧都不能浮动任何元素。最后，您的内容在一个显示块中对齐。
因为文本中有白色，就像背景一样-设置
color:#000@LuisP.A。不是这样。两个示例的颜色相同。doctype不区分大小写。我不这么认为。。这在这里是不合适的，不仅仅如此。在OP的第二个示例中，
.container
没有任何高度。两个示例都有黑色背景。阿隆，谢谢你的回答，实际上我正在工作示例1中设置它。问题是我为什么要这么做。因为，这不是一个复杂的例子。只有两个div，我试着并排放置。@Sathish-因为它们是浮动的，它们的父母不受其身高的影响-所以父母的身高是0px，所以你不会看到黑色背景，但可能我不理解你的问题-如果是，那么我将删除我的回答。也许你是对的。请参阅我的最新问题。“因此父级高度为0px，因此您不会看到黑色背景”-->这就是我可能看不到黑色的原因。您必须回答其中一个问题。谢谢设置父容器的高度将渲染黑色背景。