HTML/CSS/Layout/clear
Содержание
clear: both
<!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>
<p id="left">
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.
</p>
<p id="right">
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.
</p>
<p>
This is the text of the third paragraph.
</p>
<p id="clear">
This is the text of the forth paragraph.
</p>
</body>
</html>
Clear left
<!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>
<h2><span>span</span>Header 2 Header 2 Header 2 Header 2 Header 2
</h2>
<p>This is a test.</p>
</body>
</html>
clear left only
<!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>
<p id="left">
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.
</p>
<p id="right">
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.
</p>
<p>
This is the text of the third paragraph.
</p>
<p id="clear">
This is the text of the forth paragraph.
</p>
</body>
</html>
clear right
<?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>
<div class="myStyle">1</div>
<p>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. </p>
</body>
</html>
clear right and float right
<!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>
<div id="page">
<img src="http://www.wbex.ru/style/logo.png" height="100" width="175" alt="Plane" />
<p>This is a test. This is a test. This is a test. This is a test. This is a test. </p>
</div>
</body>
</html>
float: right and clear right
<?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>
<h1>Floating</h1>
<div class="pullQuote">quote</div>
<p>This will be at the top of the page. </p>
</body>
</html>
left clear to start a new line
<?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>
<div class="myStyle">1</div>
<p>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. </p>
</body>
</html>
The clear property cancels the floating effects, and stop the wrapping.
<!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>
Use clear div as the divider
<!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>
<div class="news">
<p>day.</p>
</div>
<div class="clear">ads</div>
<div class="news">
<p>day.</p>
<div class="clear"></div>
</div>
<div class="news clearfix">
<p class="">day.</p>
</div>
<p>Blah, blah</p>
</body>
</html>