Css 浮动或位置：绝对；我不明白

说到CSS和HTML，我完全是个傻瓜， 我试图得到两幅图像，一幅向左浮动，另一幅向右浮动 所以我可以在它们下面放一些文字

我遇到的问题是float命令和position命令都填充了页面结构，我不知道为什么

我试过一个浮动和一个位置：绝对；但他们两人还是把页面塞满了。 因为除了图像和H1和H2之外，他们在HTML页面上什么都没有 页眉和页脚都位于页面顶部

任何帮助都将不胜感激

谢谢 约翰

p、 我还在学习

---

位置：属性-在非常困难的情况下使用此属性，也可用于定位杂项。图标/标志等元素以及其他应始终固定在一个位置的元素

float:property-当我需要内联元素并且知道它们应该粘在页面或父容器的一侧时使用

显示：内联块-我用于将元素内联显示为内联块，例如

是内联块。 但这有“副作用”内联块之间总是有空白

如果要使浮动图元居中，请执行以下操作：

        <style>
          .container {
            text-align: center;
            width: 100%;
          }

          .centered-box {
            display: inline-block;
            max-width: 100%;
          }

          .elm {
            float: left;
            width: 300px; 
            max-width: 50%;
          }
        </style>


        <div class="container">
          <div class="centered-box">
            <div class="elm">
            </div>

            <div class="elm">
            </div>
          </div>
        </div>

.集装箱{
文本对齐：居中；
宽度：100%；
}
.定心盒{
显示：内联块；
最大宽度：100%；
}
埃尔姆先生{
浮动：左；
宽度：300px；
最大宽度：50%；
}

此外，浮动元素不充当块。它们被迫向上浮动到您声明的一侧，直到父容器壁或其他浮动元素。 如果要为浮动图元提供空间，请使用以下命令：

.clearfix::before {
    content: "";
    display: table-cell;
}

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

<div class="clearfix">
// flaoted elements
</div>

.clearfix:：之前{
内容：“；
显示：表格单元格；
}
.clearfix:：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
//扇形元素

这里有一个框架

标题，
页脚{
文本对齐：居中；
}
.集装箱{
显示器：flex；
证明内容：之间的空间；
}
.leftcolumn，
.右栏{
宽度：40%；
}

标题
标题1
正文

标题1
正文

页脚

我会避免使用float来获取同一行中的元素-给两个图像一个css规则

display:inline block

是否使用任何网格？