Javascript div和p标记浮动很奇怪而且不正确

在此url1中： 文本向左移动到float元素

但在这个url2中： 如果我取消类“column2of2”的float属性，div就不会停留在column1of2之外

---

我只是不知道为什么在第一个url中，文本保留在浮动div之外，但在第二个url中，“column2of2”类不能保留在浮动div之外。

在第一个url中，引号在一个元素正文中向右浮动。这就是为什么文字环绕着它

---

在第二个url中，内容用两个div相互分隔，这就是为什么引用文本没有围绕内容。

在每个示例中，内容的显示都是完全正确的。

在第一个例子中，“正确的”一个。文本显示在页面主体中，另一个div位于主体内部，浮动在页面右侧。由于浮动div的显示类型（默认情况下）为

display:block，因此无法在该区域显示内容参见

在第二种情况下，当文本仍显示在页面正文中时，您会发现页面正文中包含两个独立的div。由于其默认显示属性，与第一个类似，
display:block任何内容都不能重叠



看到这两个jsfiddle，其中我照亮了这些东西所占据的区域：


“正确”显示：

“不正确”显示：


这里是第二个，一个不“正确”的工作：

“不正确”显示-修复：（如果您对下面的解释感到困惑，我在JSFIDLE的HTML部分中编辑的内容留下了3-4行的空白，只需打开它并查看）


这就是我所改变的：

规则

.column2of2 
      {
        background: green;
        float: left;
        width: 300px;
        margin: 10px;
      }

成为：

.column2of2 
      {
        background: green;
        float: right; /* THIS WAS CHANGED */
        width: 300px;
        margin: 10px;
      }

为什么？嗯，我们希望它在右边。


HTML标记中的位置：

最后，我拿了这个：

            <div class="column2of2">
            <h3>Bicycle Timeline</h3>
            <ul>
                <li>1817: Draisienne</li>
                <li>1865: Velocipede</li>
                <li>1870: High-wheel bicycle</li>
                <li>1876: High-wheel safety</li>
                <li>1885: Hard-tired safety</li>
                <li>1888: Pneumatic safety</li>
            </ul>
        </div>


自行车时间表

1817年：德莱辛
1865年：Velocipede
1870年：高轮自行车
1876：高车轮安全性
1885年：辛苦劳累的安全
1888：气动安全


然后按原样把它放在包含的div中，它就变成了：

<h1>The Evolution of the Bicycle</h1>
        <div class="column1of2">

 /* I PUT IT HERE */

      <div class="column2of2">
            <h3>Bicycle Timeline</h3>
            <ul>
                <li>1817: Draisienne</li>
                <li>1865: Velocipede</li>
                <li>1870: High-wheel bicycle</li>
                <li>1876: High-wheel safety</li>
                <li>1885: Hard-tired safety</li>
                <li>1888: Pneumatic safety</li>
            </ul>
        </div>

 /* IT ENDS HERE */

            <h3>The First Bicycle</h3>
            <p>In 1817 Baron von Drais invented

自行车的演变
/*我把它放在这里了*/
自行车时间表

1817年：德莱辛
1865年：Velocipede
1870年：高轮自行车
1876：高车轮安全性
1885年：辛苦劳累的安全
1888：气动安全

/*到此为止*/
第一辆自行车
1817年，冯·德拉伊斯男爵被发明
删除“float:left；”从2of2 div列中添加“display:inline；”这两个分区都是浮动块级元素，后跟块级元素a或a。区别是什么？我的意思是，在url 1中，内容被包装在body元素中，在第二个url中，内容被包装在两个divs中，即“一个元素的body”？这种差异是否来自于和之间的机制差异？我只是不知道结构的不同。两者都是浮动块级元素，后跟块级元素a或a。