浮动元素后的文本未正确填充

Question

我使用了相同尺寸的填充图像，它没有透明度，否则您会看到菜单。但菜单不是问题。文字是。看看这个小提琴`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  -->'

这到底是怎么回事？文字应该是勺子。它没有浮动，因此 clearfix 不会产生任何爱（无论如何都尝试过，以防万一......）。框的轮廓仅供参考...我不明白为什么文字在底部...

提前致谢。

写！

Answer 1

您的示例相当混乱，因为您使用 css 定位是疯狂的，需要完全重写。 但是使用你的例子是因为你 nav 元素；查看您更新的小提琴：http://jsfiddle.net/bassmanpaul/DC78P/1/。

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

或许可以试试：

http://learnlayout.com/index.html

Answer 2

这是你的问题

<section id="holder">
    <img id="theBossMan"

因为 img 位于它下推文本的部分。如果您删除图像，您将看到文本正确显示。

编辑：

这个怎么样：

<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>
<section id="content">
    <h1>HELLO</h1>
    <h2>so glad you could come</h2>
    <p><span>Lorem ipsum dolor sit amet</span></p>
</section>

现在它在该部分之外并且已经更好地工作了。 img 仍然存在，只是与文本不在同一部分。