img { float: right; }
上面这段CSS代码指定了所有img标签都将向右浮动。这样,当一张图片插入到页面中时,它就会自动靠在页面的最右侧。
但是,需要注意的是,一个元素浮动后会影响到其它元素的排列。如果页面中有多个浮动元素,它们有可能会重叠在一起。为了避免这种情况,可以使用clear属性对页面进行清理。
.clearfix::after { content: ""; display: table; clear: both; }
上面代码使用了一个叫做clearfix的类,它将在页面中插入一个空的表格单元格,用来清理页面上残留的浮动元素。
最后,需要注意的是,如果图片过大,有可能会影响到页面的布局。为了避免这种情况,可以使用CSS的max-width属性,限制图片的最大宽度。
img { max-width: 100%; }
上面代码指定了图片的最大宽度不能超过其容器的宽度。这样,即使图片过大,它也不会撑破容器,影响到页面的布局。