Floating and locating problems in an instance

First, in a tag to add pictures, the resolution of the time there was a strange distance.

  
 

   
  

  
 div{
   
  

  
 border:1px solid red;
   
  

  
padding:1px;
   
  

  
float:left;
   
  

  
 }
   
  

  

   
  

  
 <div>
   
  

  
 <a> src="img/pic.jpg"/></a>
   
  

  
 </div>
  
 

Solutions

One, you can choose to add a font-size:0 to the parent div; Two, add a vertical-align:middle to the style of the picture;

Because the picture is arranged according to the text, you can add a vertical-align:middle to the attributes of the picture; )

  
 

   
  

  
 div{
   
  

  
 border:1px solid red;
   
  

  
padding:1px;
   
  

  
float:left;
   
  

  
/*font-size:0;*/
   
  

  
 }
   
  

  
 img{
   
  

  
 vertical-align: middle;
   
  

  
 }
   
  

  

   
  

  
 <div>
   
  

  
 <a> src="img/pic.jpg"/></a>
   
  

  
 </div>
  
 

Unresolved resolved

Second, the use of floating problem

To make an element appear on the same line, you can use float. (when not given wide, the float will change the width of the element from the width of the upper parent to the width of the content)

Floating gives, be sure to give the parent clear float, because there will be a lot of unexpected effects. (except for collapse)

After using the float, want to adjust the distance between the elements with margin

This div is not wide, so its width will follow the upper level, which is the width of the body. When a div uses a floating element, if it has a child element, its width will be stretched by the contents of the subelements.

Third, the use of positioning problems

Because the positioning is out of the document flow, when the child element uses positioning, the parent's height is no longer stretched by sub-level content, so the parent must be given a clear height.

For problems with the width of the parent, if the width is not given, the element will generally inherit the previous level of width.

Floating and locating problems in an instance