Let's take a look at how BR plays "clear float". Use the following code
<BR clear= "All"/>
The following is a demo of the Code effects:
Run Code Box
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><ptml xmlns=" http://www.w3.org/1999/xhtml "><pead><meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/><title>br Topsy clears the floating </title></pead><body style=" Font-family:verdana, sans-serif;font-size:12px; " ><!--contains logo header navigator--><div><div style= "float:left;width:400px;height:200px;border:1px Solid #333333; " > <p> The following line uses the <br clear= "All"/>, and you can see that the clear property of the BR tag can also reach <div style= "Clear:both" ></div> Effect, why not give up trying to be simpler? </p> <P>BR has the following five standard-compatible attribute class, clear, ID, style, title. I used to know that BR was a force-wrapping, and now I know that BR can float clearly and it's really sweaty. Although it cannot set a style. </p> <p> has been tested by IE5.0 IE5.5 IE6.0 IE7.0 FF Opera Netscape. </p> <p> How to try a new method quickly!o (∩_∩) o</p> </div><br clear= "All"/><br/><p>that quick Brown fox jumps over the lazy dog</p><p>that QuicK Brown fox jumps over the lazy dog</p><p>that quick brown fox jumps over the lazy dog</p><p>that Quick brown fox jumps over the lazy dog</p><pr/><div style= "Float:left;width:400px;height:200px;border : 1px solid #333333; " > <p> The following line is only <br/></p> <p> Note: Using the Xhtml1-transitional.dtd transition method can be validated. <br/> If it is xhtml1-strict.dtd, strict requires less label attributes the better, performance and structure separated. </P></DIV><BR/><p>that quick brown fox jumps over the lazy dog</p><p>that quick brow N Fox jumps over the lazy dog</p><p>that quick brown fox jumps over the lazy dog</p><p>that quick Brown fox jumps over the lazy dog</p><p>that quick brown fox jumps over the lazy dog</p><p>that qu Ick Brown fox jumps over the lazy dog</p><p>that quick brown fox jumps over the lazy Dog</p><p>tha T quick brown fox jumps over the lazy dog</p><pr/><div style= "Float:left;width: 400px;height:200px;border:1px solid #333333; " > <p> two equally left-floating div with only one <br/></p> <p>[discuz_code_1]</p></div><br/> <div style= "float:left;width:400px;height:200px;border:1px solid #333333;" > <p> two same left-floating div with only one <br/></p> <p>[discuz_code_2]</p></div><br clear= " All "/><pr/><div style=" float:left;width:400px;height:200px;border:1px solid #333333; > <p> two same left-floating div plus a <br clear= "all"/></p> <p>[DISCUZ_CODE_3]</p></div> <BR clear= "All"/><div style= "float:left;width:400px;height:200px;border:1px solid #333333;" > <p> two equally left-floating div plus one <br clear= "all"/></p> <p>[DISCUZ_CODE_4]</p></div> <BR clear= "All"/></div> <div><p><a href= "Http://validator.w3.org/check?uri=referer" rel = "external" ></a> </p><p> <a href=" http://jigsaw.w3.org/css-validator/"rel=" external "> </a></p> </div> <div id=" Footer "style=" Text-align:center; " ><p>powered by <a href= "Tencent://message/?uin=20122624%26site=http://www.10kuai.cn%26menu=yes" title= "Online Contact qq:20122624" >hero4u</a> producer: <a href= "mailto:webmaster@hero4u.cn" title= "Send mail or contact qq:20122624" > Wang Yu </a></p><p> Copyright copyringht©2007 Enterprise name </p><p> recommended 1024x768 resolution for best browsing effect </p> </div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
It's simple and convenient, isn't it? There is one drawback, however, that takes up a single line of space. How do you set up a BR to not take up space?
BR currently known available CSS styles that affect the appearance of BR
Display:none;
line-height:0;
If you set the height width visiblility border Background = = These styles that affect the appearance have no effect
You can simply set the row height to 0, and do not change lines.
have to admit Display:none; this is very chicken.
Here is a summary of the BR tag in HTML has 5 attributes in order "class", "clear", "id", "style", "title" When using DW8 code hints can be seen. Almost all of these properties are supported, except that some browsers do not support title. The modified BR clears the floating code in just two lines
<style> br{line-height:0; } </style>
<BR clear= "All"/>
Note : The method of using BR to clearly float the flaw is that it cannot help us through the STRICT.DTD validation, can be verified by XHTML1-TRANSITIONAL.DTD. The reason for the strict validation is that HTML tag attributes are used sparingly because the performance is separated from the structure content.
And then compare the online div omnipotent clear float
*
{
margin:0;
padding:0;
}
Html,body
{
height:100%;
width:100%;
}
. clearboth:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearboth {
height:0;
width:0;
line-height:0;
Display:inline-block;
Overflow:hidden;
}
* HTML. Clearboth {height:0%}
This method is supported by many browsers. But can help us through STRICT.DTD verification, hehe.
The <div style= "Clear:both" ></div> was the simplest, but it took up a high width. After the pseudo class use is very good, can be non-standard compatible not to buy.
Two comparison of methods :
Using the <br clear= "All"/> is much less code than the <div style= "Clear:both" ></div> method, and it's a simple way to get started. How simple how to play.
What are the benefits of a clear float? the Height:auto of the parent container is high; Make the layout better.
In fact, there is nothing wrong with floating, the key is that the floating is abused to please clear:both out.
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
