Home > Article > Web Front-end > Analysis of 7 methods to clear floating DIV in CSS_html/css_WEB-ITnose
Analysis of 7 methods to clear floating DIV in CSS_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:04979browse
http://www.coolhtml.cn/div css/2009-11-03/DIV CSS-floating-Analysis7.html
SS clear float one It is something that everyone who makes web pages will encounter, but can everyone know it clearly and understand it comprehensively? So I wrote an article like this as soon as I had some free time. I can't cover everything, but I can basically teach everyone what I know.
Let’s take a rough look at how many methods there are to clear floats (I won’t write about using zoom:1 in IE, but I’ll write about it in the next topic). Corresponding DEMO
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8"><head><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-cn" /><meta name="robots" content="all" /><meta name="Description" content="CSS Web Design 我爱CSS-Web标准化 Div+css教程" /><meta name="Keywords" content="我爱CSS,Web标准化,Div+css教程" /><title>CSS经验分享：看看清除浮动的方法一共有多少种 - CSS Web Design 我爱CSS-Web标准化 Div+css教程</title><style type="text/css">/*<![CDATA[*/ul { list-style:none; margin:0; padding:0; background-color:#A9CE78;}li { float:left; width:40px; height:40px; background-color:#66C7F7; padding:5px; margin-right:2px; color:#FFF; font-family:"Arial Black";}.demo { width:800px;}.demo div { border:2px solid #FF6767; background:#FF6767; margin-bottom:5px;}#after ul{ zoom:1;}#after ul:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden;}#afterout div:after { content:""; display:block; height:0; line-height:0; clear:both; visibility:hidden;}h1 { color:#66C7F7; font-family:"Arial Black"; margin:0; padding:0; font-size:20px; clear:both;}h2 { color:#66C7F7; font-family:"Arial Black"; margin:0; padding:0; font-size:16px; clear:both;}#brcssclear div{ zoom:1;}#brpropertyclear div{ zoom:1;}#cssoverflowauto ul { overflow:auto; zoom:1;}#cssoverflowhidden ul { overflow:hidden; zoom:1;}#cssdisplaytable ul { display:table; zoom:1;}#cssoverflowautoout div{ overflow:auto; zoom:1;}#cssoverflowhiddenout div{ overflow:hidden; zoom:1;}#cssdisplaytableout div{ display:table; zoom:1;}.cleardiv{ zoom:1;}#brcssclear br.clear,#divcssclear div.clear{ clear:both; height:0; line-height:0; margin:0; padding:0; border:0; overflow:hidden;}/*]]>*/</style></head><body><h1>Cealr Fix Layout</h1><div id="after" class="demo"> <h2>Css :after</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowauto" class="demo"> <h2>Css overflow:auto</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowhidden" class="demo"> <h2>Css overflow:hidden</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssdisplaytable" class="demo"> <h2>Css display:table</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="divcssclear" class="demo"> <h2>Div css clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <div class="clear"></div> </div></div><div id="brcssclear" class="demo"> <h2>Br css clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <br class="clear" /> </div></div><div id="brpropertyclear" class="demo"> <h2>Br property clear</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> <br clear="all" /> </div></div><div id="normal" class="demo"> <h2>Normal</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="afterout" class="demo"> <h2>Css :after out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowautoout" class="demo"> <h2>Css overflow:auto out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssoverflowhiddenout" class="demo"> <h2>Css overflow:hidden out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div><div id="cssdisplaytableout" class="demo"> <h2>Css display:table out</h2> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </div></div></body></html> 1. Use pseudo-class:after to clear the pseudo-class layer with zero height for subsequent empty control
2. Use CSS overflow:auto method Support height
3. Use CSS overflow:hidden to produce weird adaptations
4. Use display:table to turn the object into table form
5. Use div tags and the clear attribute of css
6 , using the br tag, and the clear attribute of css
7. Using the br tag, and the clear attribute of its own HTML
At a rough look, they can solve the problem; however, on the other hand, they have The pros and cons of each. (One-to-one correspondence)
1. The semantics of the advantage structure are completely correct and no other weird problems will arise.
Disadvantages Improper reuse methods can easily cause a sharp increase in the amount of code.
It is recommended to use it when the outermost layer is lightly floating, or for people who understand the modular reuse method.
2. Advantages: The semantic structure is completely correct and the amount of code is very small.
Disadvantages: After multiple nestings, clicking on the outermost light floating box will cause all the content from the outermost layer to the innermost layer to be selected (FF); or when the mouseover causes the width to change, the outermost module will appear to be scrolled. Article (IE).
It is recommended to use the module within one, please do not nest.
3. Advantages: The semantic structure is completely correct and the amount of code is very small.
Disadvantages: When the content increases, it is easy to automatically wrap the line and the content is hidden.
It is recommended to use when the width is fixed, do not nest.
4. Advantages: The semantic structure is completely correct and the amount of code is very small.
The properties of the shortcomings box model have been changed. It is conceivable that there are more strange events than you can count.
It is recommended that if you don’t want to fix the bug and kill you, it is best not to use it; however, it can be used as a temporary deception in the alpha version for testing.
5. Advantages: Very small amount of code and extremely high reusability.
The disadvantage is that it cannot perfectly adapt to semantics and is not conducive to revisions and demand changes.
Recommended for beginners, it allows you to quickly solve floating problems.
6. Advantages: The degree of semantics is better than that of the fifth case; the amount of code is very small and the reusability is extremely high.
Disadvantages: The semantics are still not perfect, which is not conducive to revisions and demand changes.
Recommended for beginners, it allows you to quickly solve floating problems.
7. Advantages: The degree of semantics is better than that of cases 5 and 6; the amount of code is minimal and the reusability is extremely high.
Disadvantages: The semantics are still not perfect, which is not conducive to revisions and demand changes.
It is recommended to guide beginners to use it when upgrading their thinking, so that they understand that instead of using classname to control a performance, it is better to return to the WEB1.0 era of web pages and directly use html attributes to control performance. After all, the latter has a larger amount of code. few.