Home > Web Front-end > HTML Tutorial > Clear floating doubt_html/css_WEB-ITnose

Clear floating doubt_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:19:55
Original
809 people have browsed it

<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>
Copy after login


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>
Copy after login

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?123456789101112131415161718192021