clear元素清除浮动float-The idle Process

clear元素清除浮动float

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