What Is an HTML Float?
float, a property of css, the main attribute values are: left (left floating), none (non-floating), right (right floating), inherit (inherit from the parent element floating), mostly used for web page layout.
FLOAT
(Css attribute)
Right!
- float,
FLOAT creates a formless homepage
Use floats to create a home page with a header, footer, left-hand table of contents, and body content.
<html>
<head>
<style type = "text / css">
dl.container
{
width: 100%;
margin: 0px;
border: 1px solid gray;
line-height: 150%;
}
dl.header, dl.footer
{
padding: 0.5em;
color: white;
background-color: gray;
clear: left;
}
h1.header
{
padding: 0;
margin: 0;
}
dl.left
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
dl.content
{
margin-left: 190px;
border-left: 1px solid gray;
padding: 1em;
}
</ style>
</ head>
<body>
<dl class = "container">
<dl class = "header"> <h1 class = "header"> W3School.com.cn </ h1> </ dl>
<dl class = "left"> <p> "Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349) </ p> </ dl>
<dl class = "content">
<h2> Free Web Building Tutorials </ h2>
<p> At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP. </ p>
<p> W3School.com.cn-The Largest Web Developers Site On The Net! </ p> </ dl>
<dl class = "footer"> Copyright 2008 by YingKe Investment. </ dl>
</ dl>
</ body>
</ html>
FLOAT create horizontal menu
Use a float with a bar of hyperlinks to create a horizontal menu.
- <html>
<head>
<style type = "text / css">
ul
{
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a
{
float: left;
width: 7em;
text-decoration: none;
color: white;
background-color: purple;
padding: 0.2em 0.6em;
border-right: 1px solid white;
}
a: hover {background-color: # ff3300}
li {display: inline}
</ style>
</ head>
<body>
<ul>
<li> <a href="#"> Link one </a> </ li>
<li> <a href="#"> Link two </a> </ li>
<li> <a href="#"> Link three </a> </ li>
<li> <a href="#"> Link four </a> </ li>
</ ul>
<p>
In the above example, we float the ul and a elements to the left. The li element appears as an inline element (without line breaks before and after the element). This will make the list line up. The ul element is 100% wide and each hyperlink in the list is 7em (7 times the current font size). We added colors and borders to make it more beautiful.
</ p>
</ body>
</ html>
The first letter of the FLOAT paragraph floats to the left
- <html>
- <head>
- <meta charset = "utf-8">
- <style>
- span
- {
- float: left;
- width: 1.2em;
- font-size: 400%;
- font-family: algerian, courier;
- line-height: 80%;
- }
- </ style>
- </ head>
- <body>
- <p>
- <span> This </ span> is some text.
- Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- Here is some text. Here is some text. Here is some text.
- </ p>
- </ body>
- </ html>
- In the paragraph of this example, the first word is embedded in a span element. The width of this span element is 1.2 times the current font size. This span element is 400% (quite large) of the current font. , The font of the text is "Algerian".