HTML/CSS/CSS Attributes and Javascript Style Properties/clear
Содержание
clear: both
<!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>Easy Clearing method </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#parent1 {
border: 5px solid purple;
padding: 10px;
}
.floatleft {
border: 5px solid red;
float: left;
width: 200px;
background: white;
}
.floatright {
border: 5px solid green;
float: right;
width: 200px;
background: white;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-table;
}
</style>
</head>
<body>
<div id="parent1" class="clearfix">
<p>This is the first parent container</p>
<p class="floatleft">This is floated content.</p>
<p class="floatright">This is floated content.</p>
</div>
</body>
</html>
"clear" Example
<html>
<head>
<style>
#secL {
position:absolute;
}
.style1 {
clear:left!important;
}
.style2 {
clear:none!important;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png"
width="71"
height="99"
style="float:left">
<a id="myL"
href="http://www.wbex.ru"
onClick="this.className="style2";return false"
onMouseOver="this.className="style1"">
Disabled link
</a>
<img src="http://www.wbex.ru/style/logo.png"
alt="This is a float=right image"
width="79"
height="99">
</body>
</html>
clear: left with float: left
<!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">
p {
border: 1px solid black;
background: rgb(218, 218, 218);
line-height: 1em;
padding: 10px;
}
p#floated {
float: left;
margin: 10px;
}
p#cleared {
clear: left;
}
</style>
</head>
<body>
<p id="floated">
This is the text of the first paragraph.
</p>
<p id="cleared">
This is the text of the second paragraph.
</p>
</body>
</html>
clear: left with float right
<!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: #aaa;
}
p#clear {
clear: left;
background: #eee;
}
</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>