Question

有清除浮动的问题，我已经使用过，我不明白为什么它不起作用。

我在三列布局中获得了一些信息，并且我已经尝试清除浮动，以便我可以继续添加以下信息，但它不会在下面。

HTML

<div class="aboutme">
<h1>About Me</h1>
<p>
<br>
<br>
<a>My name is <strong>Richard Warner</strong> and I am a young web designer from          Birmingham, UK. I have recently graduated from Manchester Metropolitan University having studied BSc(Hons) Multimedia Computing</a>. 
</p>
</div>

<div class="skills">
<h1>Skills & Expertise</h1>
<p>
<br>
<br>
<ul id="skilllist">
<li><a>HTML & 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>
</p>
</div>

<div class="cv">
<h1>My CV</h1>
<p>
<br>
<br>
<a>You can download my CV by clicking here</a>
</p>
</div>

</div>
<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
</div>

CSS

.aboutme {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
}

.skills {
width: 300px;
height: 210px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 210px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {

clear:both;
}

我已经检查过以确保我已关闭DIV标签并且它们都已关闭。任何帮助将不胜感激，谢谢。

Answer 1

你还有一个额外的</div>。预期的行为是什么？您jsFiddle上的代码似乎确实正常呈现。清除div之后的所有内容都低于其上方的浮动元素。

<div id="clear"></div>
<div id="portfolio"><a>addsassadasd</a>
    This is below the floats above<br>
    Not a word of a lie
</div>

Answer 2

检查这是否有帮助：

http://jsbin.com/ofunas/4/

CSS：

.aboutme {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;

}

.skills {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-left: 27px;
}

.cv {
width: 300px;
height: 310px;
float: left;
border: solid 1px #000;
margin-left: 27px;

}

#clear {
display:block;
clear:both;
}
.div4 {
width: 300px;
height: 310px;
border: solid 1px #000;
float: left;
margin-top:20px;
}

CSS Clear Float无法正常工作

2 个答案: