css| Skills | web | issues
Background-color strange into the phase of the pro element
This is a very strange phenomenon. It is not yet clear what the specific cause of the formation is, Background-color will be strangely into the elements of the phase. Look at the following code:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content=; charset=gb2312 "/><title> Untitled document </title><style type=" Text/css ">* {margin:0; padding:0;}. Chunk {background-color: #FFC;}. Floating block {width:100px; height:100px; float:left; Background-color: #F00;}. Clears floating {Clear:both}. Body part {margin-top:10px;} </style></pead><body><div class= "Chunk" > <div class= "floating block" ></div> <div class= "information > Here are some text </div> <div class= "clear floating" ></div></div><div class= "body part" > God .... How to get to the "big chunk" inside. </div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]
We only set a large chunk of background color, the body part is adjacent to a large element. The strange thing is that the background color of the block is in the body part. The solution is to add position:relative to one of the elements, which can be eliminated.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd" > <ptml xmlns= "//www.w3.org/1999/xhtml" ><pead><meta http-equiv= "Content-type" content=; charset=gb2312 "/><title> Untitled document </title><style type=" Text/css ">* {margin:0; padding:0;}. Chunk {background-color: #FFC;}. Floating block {width:100px; height:100px; float:left; Background-color: #F00;}. Clears floating {Clear:both}. Body part {position:relative; margin-top:10px;} </style></pead><body><div class= "Chunk" > <div class= "floating block" ></div> <div class= "information > Here are some text </div> <div class= "clear floating" ></div></div><div class= "body part" > God .... How to get to the "big chunk" inside. </div></body></ptml>
[Ctrl + A ALL SELECT hint: You can modify some of the code, and then run]