DIV CSS Three DIVs are nested in one DIV_html/css

DIV CSS Three DIVs are nested in one DIV_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:13:51

Original

1885 people have browsed it

     #n { width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;}     #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;}     #n2 { width:470px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;}      #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;}     #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; }

Copy after login

        <div id ="n">            <div id="n1"></div>            <div id="n2"></div>            <div id="n3"></div>        </div>        <div id = "f">        </div>

Copy after login

Why div(n1,n2,n3) does not overlap with div(n), but there are both above div(n1,n2,n3) There is a little gap, how to delete it.
Rendering:

Reply to discussion (solution)

The image is incompletely displayed
Right click > in new tab Open the image
or visit the following link:

http://img.my.csdn.net/uploads/201207/23/1343050098_5932.jpg

I don’t know what browser the author uses. There is no exception except that the float is not cleared!

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>divtest</title><style type="text/css">/**----------------------------------body styles----------------------------------------**/#n {width:960px; height:84px; margin:0 auto; padding:0px; background-color:Green;}     #n1 { width:230px; height:84px; margin:0px; padding:0px; float:left; background-color:Red;}     #n2 { width:530px; height:84px; margin:0px; padding:0px; float:left; background-color:Yellow;}      #n3 { width:200px; height:84px; margin:0px; padding:0px; float:right; background-color:Black;}     #f { width:960px; height:70px; margin:0 auto; padding:0px; background-color:Blue; }.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;}*+html .clearfix{height:1%;}.clearfix{display:inline-block;} /* Hide from IE Mac */ .clearfix {display:block;} </style></head><body> <div id ="n" class="clearfix">            <div id="n1"></div>            <div id="n2"></div>            <div id="n3"></div>        </div>        <div id = "f">        </div></body></html>

Copy after login

I don’t know what browser the author uses. There is no exception except that the float is not cleared!
HTML code

Quote Which one is it?
.clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
* html .clearfix{height:1%;}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}

Still the same
360 Speed Browser version number: 5.3.0.922
IE8
Tried both browsers

No exception except that the float is not cleared

It’s strange, the display is normal in IE6, 7, 8, Firefox, Google, Open, and Apple Safari.

It’s strange. When I use IE6, 7, 8, Firefox, Google, Open, and Apple’s Safari, the display is normal.
Support