Home > Developer > Web Develop
The Float property defines the direction in which the element floats. Historically, this property has always been applied to images, so that text surrounds the image, but in CSS, any element can float.
A floating element generates a block-level box, regardless of its own element. If floating non-replacement elements, specify a definite width; otherwise, they will be as narrow as possible.
Note: If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.
Comments:If there is only a small amount of space above a row for floating elements, then this element jumps to the next line, which continues until a row has enough space.
Simple example:To create a horizontal menu:
Code:
<HTML><Head><styletype= "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><ahref="#">Link One</a></Li><Li><ahref="#">Link</a></Li><Li><ahref="#">Link Three</a></Li><Li><ahref="#">Link Four</a></Li></ul><P>in the example above, we float the UL element and a element floating to the left. The Li element is displayed as an inline element (there is no line wrapping before or after the element). This allows the list to be arranged in a row. The width of the UL element is 100%, and the width of each hyperlink in the list is 7em (7 times times the current font size). We have added colors and borders to make it more beautiful. </P></Body></HTML>View Code
Create a page without a table:
Code:
<HTML><Head><styletype= "Text/css">Div.container{width:100%;margin:0px;Border:1px solid Gray;Line-height:150%;}Div.header,div.footer{padding:0.5em;Color: White;Background-color:Gray;Clear: Left;}H1.header{padding:0;margin:0;}Div.left{float: Left;width:160px;margin:0;padding:1em;}div.content{Margin-left:190px;Border-left:1px solid Gray;padding:1em;}</style></Head><Body><Divclass= "Container"><Divclass= "header"><H1class= "header">W3School.com.cn</H1></Div><Divclass= "Left"><P>"Never increase, beyond what's necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</P></Div><Divclass= "Content"><H2>Free Web Building Tutorials</H2><P>at W3School.com.cn you'll find all the web-building tutorials your Need,from basic HTML and XHTML to Advanced XML, XS L, Multimedia and WAP.</P><P>W3school.com.cn-the largest WEB developers Site on the net!</P></Div><Divclass= "Footer">Copyright by Yingke Investment.</Div></Div></Body></HTML>View Code
CSS Float Property
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
