CSS中可以使用float属性来实现图片左浮动的效果。float属性可以将元素从文档流中解脱出来,让其他元素可以绕过它排列。
img { float: left; margin-right: 10px; }
上面的代码中,我们使用了float:left来让图片左浮动,并且使用margin-right:10px来添加一定的右边距,使得图片和其他元素之间有一定的间隔。
如果需要让图片右浮动,只需要将float属性的值改为right即可。
img { float: right; margin-left: 10px; }
另外,使用浮动布局的时候需要注意,浮动元素的高度没有包含在父元素的高度中,可能会导致一些排版问题。可以使用clear属性对元素进行清除浮动,使得父元素可以正确的包含它的高度。
.clearfix:after { content: ""; display: table; clear:both; }
上面的代码中,我们使用了伪类:after来在元素的最后添加一个空白元素,并给它设置clear:both,以达到清除浮动的效果。