[分享]css两张图片用clear

CSS中的clear属性，可以用来解决两张图片重叠的问题。我们来看下面这个例子： 默认情况下，这两张图片会叠加在一起，如果我们想要让第二张图片在第一张图片下方显示，就可以使用clear属性： ...

CSS中的clear属性，可以用来解决两张图片重叠的问题。我们来看下面这个例子：

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg">
</div> 

默认情况下，这两张图片会叠加在一起，如果我们想要让第二张图片在第一张图片下方显示，就可以使用clear属性：

<div class="container">
  <img src="image1.jpg">
  <img src="image2.jpg" style="clear:both">
</div> 

在第二张图片的style中添加了clear:both，这表示在该元素之前的浮动元素都被清除，从而实现了让第二张图片跳过第一张图片的效果。

还有一种情况，就是当我们使用float属性浮动图片时，也会出现图片重叠的问题。这时，我们同样可以使用clear解决问题：

<div class="container">
  <img src="image1.jpg" style="float:left">
  <img src="image2.jpg" style="float:left">
  <div style="clear:both"></div>
</div> 

在第二张图片的style中添加了float:left，表示让该元素浮动到左侧。同时，在最后添加一个空的div元素，并对它应用clear:both，表示清除浮动元素。这样就可以保证两张图片不会发生重叠，而是按顺序依次排列。