Html CSS浮动，除了正确的位置外，到处浮动

我一直在绞尽脑汁试图解决这个问题。我不知所措。我已经搜索并尝试了我能找到的大多数解决方案，但没有运气

我正在建立一个基本的网站，作为自己爱好项目的一部分。我试图将页面内容一分为二；左和右。但是，左侧始终位于右侧内容的顶部。就好像它忽略了

float:left和<代码>浮动：右侧命令


正文{
字体系列：“无衬线”，无衬线；
背景色：#DAA520；
}
#容器{
宽度：80%；
保证金：25像素自动；
背景：#fff！重要；
边框：1px纯黑；
边界半径：10px；
溢出：自动；
}
.标题img{
左：30%；
浮动：无；
}
.标题{
边框底部：5px实心#ccc；
利润底部：4倍；
高度：300px；
}
美国海军{
列表样式：无；
宽度：100%；
边缘顶部：25px；
文本对齐：居中；
}
李国荣先生{
浮动：左；
宽度：24%；
框大小：边框框；
边框：1px纯黑；
左边距：2倍；
}
李海军：悬停{
背景：金；
}
.banner img{
显示：块；
高度：400px；
宽度：100%；
}
.sub1 h3，
p{
浮动：左；
左边距：10px；
宽度：48%；
显示：内联块；
位置：相对位置；
}
.sub2{
浮动：对；
右边距：10px；
宽度：48%；
显示器：flex；
显示：内联块；
位置：相对位置；
}

Bakem和Shakem

家
食谱
接触
巴肯

我们做，你烤！
Boudin火腿飞节肥肉、舌形牛肋鸡腿、capicola picanha猪排肉糕。牛排、肉丸子、汉堡包三尖侧翼。比尔顿牛腰肉排骨舌头，小腿铜腌牛肉，伯格多根鹿肉。凯文香克利牛腰肉波切塔
法兰克福。

注册我们的新闻信
成为巴肯家族的一员

名称
电子邮件地址

正文{
字体系列：“无衬线”，无衬线；
背景色：#DAA520；
}
* {
框大小：边框框；
}
#容器{
宽度：80%；
保证金：25像素自动；
背景：#fff！重要；
边框：1px纯黑；
边界半径：10px；
溢出：自动；
}
.标题img{
宽度：100%；
}
.标题{
边框底部：5px实心#ccc；
利润底部：4倍；
高度：300px；
}
.导航{
显示：内联块；
宽度：100%；
}
美国海军{
列表样式：无；
宽度：100%；
边缘顶部：25px；
文本对齐：居中；
}
李国荣先生{
浮动：左；
宽度：24%；
框大小：边框框；
边框：1px纯黑；
左边距：2倍；
}
李海军：悬停{
背景：金；
}
.banner img{
显示：块；
高度：400px；
宽度：100%；
}
.sub1{
显示：内联块；
宽度：50%；
浮动：左；
}
.sub1 h3，
p{
左边距：10px；
显示：内联块；
位置：相对位置；
}
.sub2{
浮动：对；
宽度：50%；
显示器：flex；
显示：内联块；
位置：相对位置；
}


家
食谱
接触
巴肯

我们做，你烤！
Boudin火腿飞节肥肉、舌形牛肋鸡腿、capicola picanha猪排肉糕。牛排、肉丸子、汉堡包三尖侧翼。比尔顿牛腰肉排骨舌头，小腿铜腌牛肉，伯格多根鹿肉。凯文·香克尔牛腰肉波切塔法兰克福。

注册我们的新闻信
成为巴肯家族的一员

名称
电子邮件地址
您正在将样式应用于左列中的元素，而不是列本身。我刚刚把h3和p从那条中去掉了。sub1样式规则，我想这就是你想要的。由于要呈现的页面的大小，最好以全屏模式查看运行代码段，但您应该看到底部的两列内容


正文{
字体系列：“无衬线”，无衬线；
背景色：#DAA520；
}
#容器{
宽度：80%；
保证金：25像素自动；
背景：#fff！重要；
边框：1px纯黑；
边界半径：10px；
溢出：自动；
}
.标题img{
左：30%；
浮动：无；
}
.标题{
边框底部：5px实心#ccc；
利润底部：4倍；
高度：300px；
}
美国海军{
列表样式：无；
宽度：100%；
边缘顶部：25px；
文本对齐：居中；
}
李国荣先生{
浮动：左；
宽度：24%；
框大小：边框框；
边框：1px纯黑；
左边距：2倍；
}
李海军：悬停{
背景：金；
}
.banner img{
显示：块；
高度：400px；
宽度：100%；
}
.sub1{
浮动：左；
左边距：10px；
宽度：48%；
显示：内联块；
位置：相对位置；
}
.sub2{
浮动：对；
右边距：10px；
宽度：48%；
显示器：flex；
显示：内联块；
位置：相对位置；
}

Bakem和Shakem

家
食谱
接触
巴肯

我们做，你烤！
Boudin火腿飞节肥肉、舌形牛肋鸡腿、capicola picanha猪排肉糕。牛排、肉丸子、汉堡包三尖侧翼。比尔顿牛腰肉排骨舌头，小腿铜腌牛肉，伯格多根鹿肉。凯文香克利牛腰肉波切塔
法兰克福。

注册我们的新闻信
成为巴肯家族的一员

名称
电子邮件地址
减小了秒的宽度
.sub1 h3, p {
    float: left;
    margin-left: 10px;
    width: 48%;
    display: inline-block;
    position: relative;
  }

.sub1 {
        float: left;
        margin-left: 10px;
        width: 48%;
        display: inline-block;
        position: relative;
      }

.sub1 h3, p {
/* float: left; */
/* margin-left: 10px; */
/* width: 48%; */
/* display: inline-block; */
/* position: relative; */
}

.sub1 {
width: 50%;
float:left;
}