HTML/CSS/Layout/clear
Содержание
clear: both
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 8px;
}
p {
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#left {
width: 200px;
float: left;
margin: 10px;
background: #ccc;
}
p#right {
width: 200px;
float: right;
margin: 10px;
background: #bbb;
}
p#clear {
clear: both;
background: #aaa;
}
</style>
</head>
<body>
This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.
This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph.
This is the text of the third paragraph.
This is the text of the forth paragraph.
</body> </html> </source>
Clear left
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> h2 {
font:3em/1em Times, serif; font-weight: bold; margin:0; position: relative; overflow: hidden; float: left;
} h2 span {
position: absolute; width: 100%; height: 5em; background: red;
} p {
clear: left;
} </style> </head> <body>
spanHeader 2 Header 2 Header 2 Header 2 Header 2
This is a test.
</body> </html>
</source>
clear left only
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body {
margin: 0;
padding: 8px;
}
p {
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#left {
width: 200px;
float: left;
margin: 10px;
}
p#right {
width: 200px;
float: right;
margin: 10px;
}
p#clear {
clear: left;
}
</style>
</head>
<body>
This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph. This is the text of the first paragraph.
This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph. This is the text of the second paragraph.
This is the text of the third paragraph.
This is the text of the forth paragraph.
</body> </html> </source>
clear right
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
} .myStyle {
float: right; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
} p {
clear: right; margin: 5px; padding: 10px;
}
</style>
</head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
clear right and float right
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>CSS Positioning Example</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style rel="stylesheet" type="text/css"> div {
font-family: arial, verdana, sans-serif; border: 1px solid #000000; padding: 3px; margin: 5px; width: 300px;
} img {
float: right; margin: 5px; width: 175px;
} p {
clear: right;
} </style> </head> <body>
<img src="http://www.wbex.ru/style/logo.png" height="100" width="175" alt="Plane" />
This is a test. This is a test. This is a test. This is a test. This is a test.
</body> </html>
</source>
float: right and clear right
<source lang="html4strict">
<?xml version="1.0" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<title>Floating Positioning</title> <style rel="stylesheet" type="text/css">
body {
margin: 10px; border-style: solid; border-width: 1px; border-color: #000000;
} p {
clear: right; background-color: red;
} div.pullQuote {
float: right; border-style: solid; border-width: 1px; padding: 5px; margin: 5px; width: 150px;
} </style> </head> <body>
Floating
This will be at the top of the page.
</body> </html>
</source>
left clear to start a new line
<source lang="html4strict">
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css">
body {
margin: 0px; padding: 0px; color: #000; background-color: #ccc;
} .myStyle {
float: left; padding: 10px; margin: 5px; background-color: #fff; border: 1px solid #000; width: 20%;
} p {
clear: left; margin: 5px; padding: 10px;
}
</style>
</head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body>
</html>
</source>
The clear property cancels the floating effects, and stop the wrapping.
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>clear</title>
<style rel="stylesheet" type="text/css">
img#left {
float: left;
}
img#right {
float: right;
}
p {
clear: both;
margin: 20px 0 0 0;
font: 12px sans-serif;
border: 1px solid rgb(200, 200, 200);
background: rgb(244, 244, 244);
padding: 5px;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" alt="" id="left" />
<img src="http://www.wbex.ru/style/logo.png" alt="" id="right" />
</p>
</body>
</html>
</source>
Use clear div as the divider
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Enclosing Floats</title> <style type="text/css"> .clear {
clear: both;
} .news {
background-color:#eaeaea; border: solid 1px #999; width: 500px; margin-top: 10px;
} .news img {
float: left; padding: 10px 0 10px 10px;
} .news p {
float: right; width: 350px; margin: 0; padding: 10px 10px 10px 0;
} .clearfix:after {
content: "."; height: 0; visibility: hidden; display: block; clear: both;
} </style> </head> <body>
day.
day.
day.
Blah, blah
</body> </html>
</source>
