漂浮物未被清除

Question

我上周在遇到问题时发布了一个类似的问题,并且不确定我是否可以在同一个问题中重新提问,所以我创建了一个新问题.

我有两个列,一个向左浮动,一个向右浮动,我使用清除:两个都清除浮动但它不起作用.我已经检查过以确保我的所有DIV标签都已关闭它们(这是上次的问题)并移动清除:两者都分别到不同的部分,但它仍决定不起作用.代码如下,但如果您想看看它的样子,可以在这里看到http://www.richardawarner.co.uk/portfoliov2

任何帮助表示赞赏.

HTML

<div id="sectiontwowrapper">
        <div id="header">
            <h1>About Me</h1>
        </div><!--Header-->

        <div id="contentwrapper">
            <div id="aboutmeleft">
                <h3>About Me</h3>
                <br>
                <a>My name is <strong>Richard Warner</strong> and I am a young web designer from Birmingham, United Kingdom. I have recently graduated from Manchester Metropolitan University having studied BSc(Hons) Multimedia Computing. Whilst having an interest in studying different aspects to computers, it was here where I developed a passion for web design. I have learnt various languages such as HTML, CSS and PHP aswell as experienced using Adobe Photoshop, Adobe Dreamweaver and other Adobe products.</a>

                <p>
                    <h3>Skills and Expertise</h3>
                    <br>
                        <ul>
                            <li><a>HTML and CSS</a></li>
                            <li><a>PHP</a></li>
                            <li><a>MySQL</a></li>
                            <li><a>Wordpress</a></li>
                            <li><a>Adobe Photoshop</a></li>
                            <li><a>Adobe Dreamweaver</a></li>
                        </ul>

            </div><!-- About me left -->

            <div id="aboutmeright">
                <h3>Hobbies</h3>
                <br>
                <a>Hobbies will appear here</a>

                <p>
                    <h3>My CV</h3>
                    <br>
                        <a>You can download my CV by clicking here.</a>
            </div><!-- About Me right -->


        </div><!--Content Wrapper -->


    </div><!--Section Two Wrapper -->
    <div class="clear"></div>


    <div id="sectionthreewrapper">
        this line should be underneath this sections border line below
    </div> <!--Section three wrapper -->

CSS

#sectiontwowrapper {

position: relative;
top: 100px;
min-height: 550px;
min-width: 960px;
text-align: left;
border: solid 1px #000;

#contentwrapper {

width: 960px;
margin: 0 auto;
text-align: left;
}

#aboutmeleft {

width: 450px;
height: 400px;
/*border: 1px solid #000;*/
position: relative;
top: 40px;
float: left;


}

#aboutmeright {

width: 450px;
height: 220px;
/*border: 1px solid #000;*/
position: relative;
top: 40px;
float: right;
}

.clear {

display: block;
clear: both;

}

Answer 1

你有你sectiontwowrapper的div设置为position: relative用top: 100px.这将整个部分向下移动100个像素 - 即使清晰的工作,然后sectiontwowrapper下降100px进入下一部分.