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

This article mainly explains "how to use float in HTML". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use float in HTML layout"!

1. Use float to surround the content

Html Code:

Floating-text surround

Float to the left

This text is in the normal paragraph after the floating box (.box _ left). This paragraph can be seen as a light green box. Notice that this outline extends behind the floating div. This is important because it means that the left side of the paragraph is actually on the left side of the page. It's just that the content of the paragraph has been moved to the right to "bypass" the floating DIV. If you try to manipulate the margins or padding on the side of a paragraph adjacent to a floating point, it will have an impact.

Float to the right

Now let's add the second paragraph and enrich it with the content. You should see that once the height of the div is covered, the text of this paragraph will surround it so that the text is no longer indented. A similar effect can be achieved through settings in html.

A complication with the float attribute is that InternetExplorer will add some fill pixels between the floating div box and the subsequent text. This has no place in the standard, just the way they "weaken" CSS and HTML. In other browsers, paragraph text will be docked with a floating DIV. If you want to populate all browsers, you need to specify margins for floating elements.

Css Code:

.demo {

Width:520px

Overflow:hidden

Border:2pxsolidpaleturquoise

Padding:10px

Margin:100pxauto

}

.box _ left {

Float:left

Margin-right:15px

Width:150px

Height:100px

Border-radius:5px

Background-color:rgb (207232220)

Padding:1em

}

.box _ right {

Float:right

Margin-left:15px

Width:150px

Height:100px

Border-radius:5px

Background-color:rgb (207232220)

Padding:1em

}

At this point, I believe you have a deeper understanding of "how to use float layout in HTML". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue 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.