html - float 元素后的文本未正确填充

Question

我使用了具有相同尺寸的填充图像，它没有透明度，否则您会看到菜单。但菜单不是问题。正文是。看看这个 fiddle `http://jsfiddle.net/WhiteRau/DC78P/ ' 你会明白我的意思。

这是完整的 !@#$ 代码:

CSS

<style type="text/css">
        nav {
            border: 1px solid blue;
            margin: 4px;
            padding: 10px;
            position: relative;
            float: left;
            width: 200px;
            font-family: "Oswald", sans-serif;
            z-index: 6;
            overflow: hidden;
        }
        nav ul li {
            background: #d5b079;
            font-size: 24px;
            border-radius: 20px;
            margin: 10px 0;
            padding: 4px 20px 6px 20px;
        }
        nav ul li:hover, nav ul li:active {
            background: #434459;
        }
        #holder {
            display: inline-block;
            border: 2px solid white;
        }
        #theBossMan {
            width: 450px;
            float: left;
            position: relative;
            left: -220px;
            top: -120px;
            border: 2px solid green;
            pointer-events: none;
            z-index: 8;
        }
        #content {
            background: #d5b079;
            color: white;
            text-align: justify;
            border: 1px solid red;
            margin: 4px;
            width: 480px;
            padding: 10px 20px;
            position: relative;
            left: 400px;
            z-index: 4;
        }
</style>

HTML

<nav class="group">
    <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">CONTACT</a></li>
        <li><a href="#">ABOUT</a></li>
    </ul>
</nav>
<section id="holder">
    <img id="theBossMan" src="http://image0-rubylane.s3.amazonaws.com/shops/colemanscollectibles/03660.1L.jpg" alt="it's a placeholder">
    <section id="content">
        <h1>HELLO</h1>
        <h2>so glad you could come</h2>
        <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ducimus harum molestias quis enim delectus corrupti alias provident adipisci atque dicta quidem reiciendis tenetur perferendis quasi odit minus sed natus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. A, est, vel ducimus perferendis atque praesentium culpa ratione veritatis nam cupiditate unde sequi molestias neque veniam voluptas soluta porro dolorum reprehenderit!</span></p>
    </section>
</section> <!-- end of HOLDER  -->'

这到底是怎么回事？文字应该在勺子旁边。它没有 float ，所以 clearfix 不会产生任何爱(无论如何都试过，以防万一......)。方框轮廓仅供引用...我不明白为什么文本在底部...

提前致谢。

WR!

Answer 1

你的例子相当困惑，因为你对 css 定位的使用太疯狂了，需要完全重写。 但是用你的例子是因为你nav元素;查看更新后的 fiddle :http://jsfiddle.net/bassmanpaul/DC78P/1/ .

当你将鼠标悬停在导航上时(我添加了一些 css 来“隐藏”它)，你会看到你的正文跳到正常位置，因为 <section>标签实际上位于您的 nav 下方元素所以文本元素实际上是正确放置的。将所有其他元素放置在其父容器之外的疯狂定位是您的使用……

也许试试:

http://learnlayout.com/index.html