Html 运行时，对齐可以在小提琴上工作，但不能在实际浏览器上工作

当我在JSFIDLE中运行它时，它工作得很好，但是当我在任何浏览器上测试运行时，对齐都会出错？图片应该在左边对齐，一张在另一张上面

<main>
    <h2>Shop at Pacific Trails</h2>

    <h3>Contact Us</h3>

    <p>Required information is marked with an asterisk(*).</p>

    <img class="leftfloat" src="trailguide.jpg" alt="picture of trail 
    guide"/>

    <h3>Pacific Trails Hiking Guide</h3>

    <p>Guided hikes to the best trails around Pacific Trails Resort.  
    Each hike includes a detailed route, distance, elevation change, and 
    estimated time. 187 pages. Softcover. $19.95.</p>

    <form method="post"
    action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="descl" id="descl" value="Hiking Guide">
    <input type="hidden" name="costl" id="costl" value="19.95">
    <input type="submit" value="Add to Cart">
    </form>

    <br class="clear">


    <img class="leftfloat" src="yurtyoga.jpg" alt="picture of yoga 
    book"/>

    <h3>Yurt Yoga</h3>

    <p>Enjoy the restorative poses of yurt yoga in the comfort of your 
    own home.  Each post is illustrated with several photographs, an 
    explanation, and a description of the restorative benefits. 206 
    pages. Softcover. $24.95.</p>

    <form method="post"
    action="http://www.webdevfoundations.net/scripts/cart.asp">
    <input type="hidden" name="desc2" id="desc2" value="Yurt Yoga">
    <input type="hidden" name="cost2" id="cost2" value="24.95">
    <input type="submit" value="Add to Cart">
    </form>

    <br class="clear">

在太平洋小径购物
联系我们
所需信息用星号（*）标记

太平洋径远足指南
在导游带领下徒步前往太平洋步道度假村周围的最佳步道。
每次徒步旅行都包括详细的路线、距离、海拔变化和路线
估计时间。187页。软封面$19.95



蒙古包瑜伽
在舒适的环境中享受蒙古包瑜伽的恢复性姿势
自己的家。每篇文章都附有几张照片，一张
解释，以及对恢复性利益的描述。206
页。软封面$24.95

---

问题在于行

浮动：清除。这应该是
clear：两者都有

小提琴的问题是没有要加载的图像，因此没有显示对齐问题。但是如果你把真实的图像放在小提琴上，问题也会在那里显现出来

解决方案：将
float:clear
替换为
clear:both


正文{
/*背景图片：url（background.jpg）*/
背景色：#FFFFFF；
颜色：#666666；
字体：Verdana，Arial，无衬线；
}
标题{
背景色：#000033；
颜色：#FFFFFF；
字体：佐治亚，衬线；
}
h1{
背景图片：url（sunset.jpg）；
背景重复：无重复；
背景位置：右；
左侧填充：20px；
线高：200%；
高度：72px；
页边距底部：0；
}
导航{
填充物：5px；
背景色：#90C7E3；
字体大小：粗体；
}
导航a{
文字装饰：无；
}
氢{
颜色：#3399CC；
字体：佐治亚，衬线；
}
dt{
颜色：#000033；
字体大小：粗体；
}
.度假村{
颜色：#000033；
字体大小：1.2米；
}
页脚{
填充：10px；
字体大小：.70em；
字体：斜体；
文本对齐：居中；
}
#包装纸{
盒影：5px 5px 5px；
最大宽度：1024px；
最小宽度：700px；
背景色：#FFFFFF；
宽度：80%；
右边距：自动；
左边距：自动；
}
h3{
颜色：#000033；
}
主要{
填充：0px 20px 0px 20px；
显示：块；
}
家庭英雄{
背景图片：url（coast.jpg）；
高度：300px；
背景大小：100%100%；
}
尤瑟罗先生{
背景图片：url（yurt.jpg）；
高度：300px；
背景大小：100%100%；
}
特雷尔赫罗先生{
背景图片：url（trail.jpg）；
背景大小：100%100%；
高度：300px；
}
桌子{
宽度：90%；
保证金：自动；
边框：1px实心#3399cc；
边界塌陷：塌陷；
}
运输署，
th{
边框：1px实心#3399cc；
填充物：5px；
}
运输署{
文本对齐：居中；
}
.文本{
文本对齐：左对齐；
}
tr:n个类型（偶数）{
背景色：#F5FAFC；
}
标签{
浮动：左；
显示：块；
宽度：8em；
右侧填充：1em；
}
输入，
文本区{
显示：块；
边缘底部：1米；
}
#我的问题{
左边距：10em；
}
视频
嵌入{
浮动：对；
边缘：2米；
}
.leftfloat{
浮动：左；
边缘：1米；
}
.清楚{
明确：两者皆有；
}

太平洋步道度假村
在太平洋小径购物
联系我们
所需信息用星号（*）标记

太平洋径远足指南
在导游带领下徒步前往太平洋步道度假村周围的最佳步道。每次远足包括详细的路线、距离、海拔变化和估计时间。187页。软封面$19.95



蒙古包瑜伽
在舒适的家中享受蒙古包瑜伽的恢复性姿势。每一篇文章都附有几张照片、一份解释和对恢复性益处的描述。206页。软封面$24.95



版权及副本；2016太平洋步道度假村

大多数css用于除此之外的其他页面。此页面的主css位于css文件的底部。使用开发工具在chrome浏览器中查看每个（JSFIDLE，以及您的实际站点），看看两者之间有什么不同？第二个图像并不像其预期的那样向左浮动。它没有在第一个图像下对齐