Home >Web Front-end >HTML Tutorial >Clear floating doubt_html/css_WEB-ITnose
Clear floating doubt_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:19:55802browse
<style>.clearfix:after{ content:"."; display:block; height:0px; line-height:0px; clear:both; visibility:hidden; font-size:0px; }.clearfix{*zoom:1;}</style><div style="width:950px;"><div style="width:190px; height:50px;">1</div><div style="width:190px; height:100px;">2</div><div style="width:190px; height:200px;">3</div><div style="width:190px; height:50px;">4</div><div style="width:190px; height:100px;">5</div><div class="clearfix"></div><div style="width:190px; height:100px;">6</div></div> What I originally thought was that no matter whether the heights of 1 to 5 are the same,
I must make sure that 6 is below 1.
But under IE6, do If not,
solve it. . .
Reply to the discussion (solution)
Sir, you don’t use floats in your code. Why do you need to clear the floats?
If you just want to achieve the ranking of 6 below 1, the following code can be used:
<!DOCTYPE html><html><head><title></title><style> .container{ position:relative; } .container div{float:left; border:1px solid; } #inner6{position:absolute;left:0;top:50px;}</style> </head><body><div class="container" style="width:950px;"><div style="width:190px; height:50px;">1</div><div style="width:190px; height:100px;">2</div><div style="width:190px; height:200px;">3</div><div style="width:190px; height:50px;">4</div><div style="width:190px; height:100px;">5</div><div class="clearfix"></div><div id="inner6" style="width:190px; height:100px;">6</div></div></body></html> Sir, you don’t use floats in your code, why do you need to clear the floats?
If you just want to achieve 6 ranking below 1, the following code can be used:
XML/HTML code?1234567891011121314151617181920218b05045a5be5764f313ed5b9168a17e6100db36a723c770d327fc0aef2ce13b193f0f5c25f18dab9d176bd4f6de5d30eb2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 .container{ position:relative; } ……
Sorry, I forgot to add it
The situation after adding it is the same as what my 1L said,
Is there any other way to do it?
<div style="width:950px; class='clearfix'"><div style="width:190px; height:50px;">1</div><div style="width:190px; height:100px;">2</div><div style="width:190px; height:200px;">3</div><div style="width:190px; height:50px;">4</div><div style="width:190px; height:100px;">5</div></div><div style="width:190px; height:100px;">6</div>
clearfix is not what LZ uses.
clearfix usage: When the child element floats, clear the float of the parent layer, that is, add clearfix to the parent layer, so f75b3b31bb9e1aacf597fc0293700d1b616b28748ea4df4d9c2150843fecfba68 This The block will be below 1.