clear元素用来清除左边或者右边或者两边的浮动元素(float)
比如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
img
{
float:left;
border:1px solid red;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img src="logocss.gif" width="95" height="84" />
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</body>
</html>
第一段p没有指定clear，因此左边会有图片，而第二段class是clear，clear: both，清除了两边的浮动元素，左右都不会出现浮动元素，所以它自己占单独的行，不和其他浮动元素占一行。
Comments
Post a Comment