Question

HTML看起来像这样：

<article>
    <h1>header</h1>
    <p>body</p>
    <footer>footer</footer>
</article>
<aside>
    <ol>
        <li>one</li>
        <li>two</li>
    </ol>
</aside>

CSS看起来像这样：

h1 {
    background: red;
}
p, footer {
    background: green;
    float: right;
    width: 70%;
}
aside {
    background: blue;
    float: left;
    width: 30%;
}

现场直播：http://jsfiddle.net/GD9Fh/

为什么蓝色块（左浮动）浮动到与绿色块（右浮动）相同的水平？

Answer 1

jsFiddle

<p>标记会自动添加新的段落标记。尝试使用所有DIV。另外，将标题设置为特定高度，并使用aside和body的绝对定位。

<强> HTML

<article>
    <h1>header</h1>
    <div id="main">body</div>
    <footer>footer</footer>
</article>
<aside>
    <ol>
        <li>one</li>
        <li>two</li>
    </ol>
</aside>

<强> CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border:0;
    font-size:100%;
    font:inherit;
    vertical-align:top;
    margin:0;
    padding:0
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block
}
body {
    line-height:1
}
ol, ul {
    list-style:none
}
blockquote, q {
    quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
    content:none
}
table {
    border-collapse:collapse;
    border-spacing:0
}
h1 {
    background: red;
}
#main {
    background: green;
    float: right;
    width: 70%;
}
aside {
    background: blue;
    float: left;
    width: 30%;
    display:inline-block;
    vertical-align:top;
}
footer {background: yellow; position:absolute;bottom:0;width:100%;)

Answer 2

如果你将<p>和<footer>包裹在<div>中并浮动它，那么它就会完成你所追求的目标。要了解原因，请在示例中添加另一个<p>，然后您会看到所有内容仍悬浮在<footer>的左侧。

Answer 3

想象一下h1，p和footer周围的边框......旁边不能只是“在”里面......这就是标记的写法。你有CSS的想法是正确的。查看this FIDDLE

如果不了解真正想要实现的目标，我希望您可以在这里找到帮助。

解决方案01

article元素（基本上是具有一些语义含义的div）默认为100％宽度，因为所有块级元素都是。因此，删除其子项的宽度并将其放在<article>

上

HTML

<article>
    <h1>header</h1>
    <p>body</p>
    <footer>footer</footer>
</article>
<aside>
    <ol>
        <li>one</li>
        <li>two</li>
    </ol>
</aside>

CSS

h1 {
    background: red;
}

article {
    float: right;
    width: 70%;
}

p, footer {
    background: green;
}

aside {
    background: blue;
    float: left;
    width: 30%;
}

溶液02

重新考虑html

Answer 4

根据w3schools“元素水平浮动，这意味着元素只能向左或向右浮动，而不是向上或向下浮动。”

css float:right会让浏览器尽可能向右移动元素，否则就会将元素移动到其他位置。

如果您需要将<aside>展开，请将其放在<article>元素

之前

喜欢这样： - http://codepen.io/mrmoje/full/obrBI

为什么左浮动元素在右浮动元素存在的情况下不会一直向上？

4 个答案:

解决方案01

HTML

CSS

溶液02