Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of floating and cleaning in CSS positioning, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

CSS float

A floating box can be moved left or right until its outer edge touches the border that contains the box or another floating box.

Because the floater is not in the normal stream of the document, the block box in the normal stream of the document behaves as if the floater does not exist.

In CSS, we float the element through the float attribute.

Line frames and cleanup

The line box next to the float box is shortened to make room for the float box, which surrounds the float box (such as text around the image).

To prevent a row box from surrounding a floating box, you need to apply the clear attribute to the box.

The value of the clear property can be left, right, both, or none, which indicates which edges of the box should not be next to the floating box.

This is a useful tool that allows surrounding elements to make room for floating elements.

.news {background-color: gray; border: solid 1px black;}. News img {float: left;}. News p {float: right;}. Clear {clear: both;}

Some text

Note: for layout purposes, the meaningless tag clear has been added. Another way is to float the container div:

.news {background-color: gray; border: solid 1px black; float: left;}. News img {float: left;}. News p {float: right;}

Some text

Note: the effect is the same. However, although unnecessary tags are reduced, the next element is affected by this floating element.

Float and clean up instances

Float the image with borders and boundaries to the right of the paragraph:

Img {float: right; border: 1px dotted black; margin: 0px 0px 15px 20px;}

In the paragraph of this example, the image floats to the right and a dotted border is added. We also added margins to the image so that we can push the text away from the image: the top and right margins are 0px, the bottom margins are 15px, and the left margin of the image is 20px.

The captioned image floats on the right:

Div {float: right; width: 120px; margin: 0 15px 20px; padding: 15px; border: 1px solid black; text-align: center;}

CSS is fun!

In the paragraph of this example, the width of the div element is 120 pixels, which contains images. The div element floats to the right. We added margins to the div element so that we could push the div away from the text. At the same time, we added borders and inner margins to div.

Float the first letter of the paragraph to the left:

Span {float: left; width: 0.7em; font-size: 400%; font-family: algerian,courier; line-height: 80%;}

This is some text.This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

In the above paragraph, the first letter of the text is contained in a span element. The width of this span element is 0. 7 times the current font size. The font size of the span element is 400% and the line height is 80%. The letter font in span is "Algerian"

Create a horizontal menu:

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 } Link one Link two Link three Link four

In the above example, we float the ul and an elements to the left. The li element is displayed as an inline element (there is no line break before and after the element). This allows the list to be arranged in a row. The width of the ul element is 100%, and each hyperlink in the list is 7em (7 times the current font size). We added colors and borders to make it more beautiful.

Create a home page without forms:

Div.container {width: 100%; margin: 0px; border: 1px solid gray; line-height: 150%;} div.header,div.footer {padding: 0.5mm; color: white; background-color: gray; clear: left;} h2.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;} HuluMiao.cn

"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)

Free Web Building Tutorials

At HuluMiao.cn you will find all the Web-building tutorials you need,from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.

HuluMiao.cn-The Largest Web Developers Site On The Net!

Copyright 2008 by HuluMiao.cn.

Note: use floats to create a home page with a header, footer, left directory, and body content.

Thank you for reading this article carefully. I hope the article "sample Analysis of floating and cleaning in CSS Positioning" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.