How to layout with float in HTML
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!
