News layout on the right of the picture on the left

Similar modules are often encountered during interviews or project requirements. Most of them are implemented using a fixed-width floating method, but in this way, their flexibility is lost. If the width is not specified, the text is surrounded by images.

So the problem to be solved is to make the width uncertain, while using floating, the text will not surround the image.

In fact, if only the image is set to float to the right, you can use a tool in chrome or Firefox to view the list area. The area of the image will be overwritten, that is, it will overlap with the edge of the flaot box. For example

As long as the elements overlap with the float box edge, this problem can be solved.

The concept of block formatting context is involved here. The edge of the block-level element that triggers BFC does not overlap with the float box. So the positive solution is:

 <  Style  >  . Img  {  Float  : Left  ;  Border  :  1px solid # ccc  }  Ul  {  Overflow  :  Hidden  ; Zoom  :  1  }  </  Style  >  <  Div  Class  = "Main"  >      <  Div  Class  = "IMG" > </  Div  >      <  Ul  > <  Li  > </  Li  > </  Ul  >  </  Div  > 

 

References: http://hikejun.com/blog/2011/10/26/%E8%BF%91%E6%9C%9F%E9%9D%A2%E8%AF%95%E6%84%9F%E5%8F%97/

About Block formatting context: http://simplej.blog.163.com/blog/static/181014362201110334948690/