HTML/CSS/Layout/float
Содержание
- 1 float control: default margin padding
- 2 float extra box properties
- 3 Float H2 tag to left
- 4 float highlighted dimensions
- 5 float highlighted, dimensions multiple paragraph
- 6 float inline becomes block
- 7 float inline becomes block multiline inline box model
- 8 float inline becomes block with inline padding
- 9 float left
- 10 float left and right
- 11 Float left with text wrapper around
- 12 float multiple floats
- 13 Float right with text wrapper around
- 14 Left float and right float
- 15 left float with padding
- 16 nested float
- 17 Positioning: float right and left
- 18 Set extra content to float left
- 19 Using Float Positioning
float control: default margin padding
<!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#floated {
float: left;
}
p {
border: thin solid black;
}
</style>
</head>
<body>
<p id="floated">
This paragraph is floated left.
</p>
<p id="normal">
The text of this paragraph is beside the floated paragraph.
</p>
</body>
</html>
float extra box properties
<!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#floated {
float: left;
margin: 10px;
border: 1px solid black;
padding: 10px;
width: 100px;
height: 100px;
background: rgb(218, 218, 218);
}
p#normal {
height: 500px;
margin: 10px;
padding: 10px;
border: 1px solid black;
background: rgb(248, 248, 248);
}
</style>
</head>
<body>
<p id="floated">
This paragraph is floated left.
</p>
<p id="normal">
The text if this paragraph is beside the floated paragraph.
</p>
</body>
</html>
Float H2 tag to 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-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>
float highlighted dimensions
<!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">
div {
margin: 10px;
background: rgb(200, 200, 200);
height: 100px;
}
p#floated {
background: rgb(220, 220, 220);
margin: 10px;
padding: 10px;
border: 1px solid black;
float: left;
}
p#normal {
background: rgb(240, 240, 240);
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<p id="floated">
This paragraph is floated left.
</p>
<p id="normal">
The text of this paragraph is beside the floated paragraph.
</p>
</div>
</body>
</html>
float highlighted, dimensions multiple paragraph
<!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#floated {
float: left;
border: 1px solid black;
padding: 10px;
width: 100px;
background: rgb(218, 218, 218);
margin: 10px;
}
p.normal {
border: 1px solid black;
background: rgb(248, 248, 248);
}
</style>
</head>
<body>
<p id="floated">
This paragraph is floated left.
</p>
<p class="normal">
The text if this paragraph is beside the floated paragraph.
</p>
<p class="normal">
The text if this paragraph is beside the floated paragraph.
</p>
</body>
</html>
float inline becomes block
<!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">
div {
margin: 10px;
background: rgb(200, 200, 200);
height: 100px;
}
span#floated {
background: rgb(220, 220, 220);
margin: 10px;
padding: 10px;
border: 1px solid black;
float: left;
width: 100px;
}
span#normal {
background: rgb(240, 240, 240);
border: 1px solid black;
margin: 100px;
width: 1000px;
}
</style>
</head>
<body>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
The text of this span is beside the floated span.
</span>
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
</div>
</body>
</html>
float inline becomes block multiline inline box model
<!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">
div {
margin: 10px;
background: #ccc;
height: 100px;
}
span#floated {
background: #aaa;
margin: 10px;
padding: 10px;
border: 1px solid black;
float: left;
width: 100px;
}
span#normal {
background: #ddd;
border: 1px solid black;
opacity: 0.7;
}
</style>
</head>
<body>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
The text of this span is beside the floated span.
</span>
This is extra text. This is extra text. This is extra text.
</div>
</body>
</html>
float inline becomes block with inline padding
<!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">
div {
margin: 10px;
background: rgb(200, 200, 200);
height: 100px;
}
span#floated {
background: rgb(220, 220, 220);
margin: 10px;
padding: 10px;
border: 1px solid black;
float: left;
width: 100px;
}
span#normal {
background: rgb(240, 240, 240);
border: 1px solid black;
margin: 100px;
width: 1000px;
padding: 50px;
}
</style>
</head>
<body>
<div>
<span id="floated">
This span is floated left.
</span>
<span id="normal">
The text of this span is beside the floated span.
</span>
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
This is extra text. This is extra text. This is extra text.
</div>
</body>
</html>
float left
<!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">
<head>
<title>Working with Style</title>
<style rel="stylesheet" type="text/css">
#content {
float:left;
width:70%;
margin-right: 25px;
}
#right {
padding-top: 20px;
}
</style>
</head>
<body>
<div id="content">
<h3>Quotations</h3>
<p>this is a test</p>
</div>
<div id="right">
<p>Navigate:</p>
<p>
<a href="">Home</a><br />
<a href="">News</a><br />
<a href="">About</a><br />
<a href="">Get in Touch</a></p>
</div>
</body>
</html>
float left and 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">
p {
border: 1px solid black;
padding: 10px;
background: rgb(218, 218, 218);
margin: 10px;
}
p#left {
float: left;
}
p#right {
float: right;
}
</style>
</head>
<body>
<p id="left">
This is the text of the first paragraph.
</p>
<p id="right">
This is the text of the second paragraph.
</p>
</body>
</html>
Float left with text wrapper around
<?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 {
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>
float multiple floats
<!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 {
float: left;
border: 1px solid black;
padding: 10px;
background: rgb(218, 218, 218);
margin: 10px;
}
</style>
</head>
<body>
<p>
This is the text of the first paragraph.
</p>
<p>
This is the text of the second paragraph.
</p>
<p>
This is the text of the third paragraph.
</p>
</body>
</html>
Float right with text wrapper around
<?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 {
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>
Left float and right float
<html>
<head>
<title>Left float and right float</title>
<style type="text/css">
.leftFloat {
float: left
}
.rightFloat {
float: right
}
p {
clear: left;
}
</style>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" class="leftFloat" alt="cover" />
<p>This is the book cover for the <em>CSS</em>.</p>
<img src="http://www.wbex.ru/style/logo.png" class="rightFloat" alt="cover"/>
<p>This is the book cover for the <em>CSS</em>.</p>
</body>
</html>
left float with padding
<!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" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#logoMain {
float: left;
padding-right: 20px;
padding-bottom: 10px;
}
p {
font: 14px Arial;
}
</style>
</head>
<body>
<p><img id="logoMain" src="header.gif" width="300" height="100" alt="" /></p>
<p>this is a test.</p>
</body>
</html>
nested float
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title></title>
<style type="text/css">
#main {
border:1px solid #000;
background:#ccc;
}
#main #menu {
border-left:1px solid #000;
border-bottom:1px solid #000;
float:right;
width:230px;
background:#eee;
margin:0px 0px 10px 10px;
}
p,h1,pre {
margin:0px 10px 10px 10px;
}
h1 {
font-size:14px;
padding-top:10px;
}
#menu p { font-size:10px}
</style>
</head><body>
<div id="main">
<div id="menu">
<h1>menu</h1>
<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.
</p>
</div>
<h1>nested float</h1>
<h1>main</h1>
<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.
</p>
<br />
</div>
</body>
</html>
Positioning: float right and left
<!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" xml:lang="en">
<head>
<title>Positioning</title>
<style type="text/css">
#logoMain {
float: left;
}
#logoSub {
float: right;
}
</style>
</head>
<body>
<img id="logoMain" src="http://www.wbex.ru/style/logo.png" width="300" height="100" alt="" />
<img id="logoSub" src="http://www.wbex.ru/style/logo.png" width="200" height="50" alt="" />
</body>
</html>
Set extra content to float left
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
div#extra{
float:left;
width:25%;
margin-left:-100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">
<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
<select name="fmtitle" id="fmtitle">
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss</option>
<option value="mr">Mr.</option>
</select>
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />
<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
Using Float Positioning
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Using Float Positioning</title>
<style type="text/css" rel="stylesheet">
p {
border-width: thin;
border-style: solid;
height: 100px;
width: 100px;
text-align: center;
float: right;}
p.red {background-color: red;}
p.white {background-color: white;}
p.blue {background-color: blue;}
</style>
</head>
<body>
<p class="red">
Container 1
</p>
<p class="white">
Container 2
</p>
<p class="blue">
Container 3
</p>
</body>
</html>