Posted on | by liu
CSS是一种强大的网页样式控制语言，可以控制各种元素的样式，其中也包括插入的图片的位置。
在HTML中，使用img元素插入图片，图片默认会在文档流中按照其出现的位置进行排版。但在实际开发中，大家可能需要改变图片的位置，例如让图片居中或者紧贴某一个元素。这时候，CSS就派上了用场。
使用CSS控制图片位置有两个主要的方法，分别是使用浮动（float）和位置（position）属性。
首先介绍浮动属性。浮动可以使元素脱离文档流，并围绕其他元素排布。大家可以通过给图片设置float:left或float:right属性，让图片在文本流中左右排布。例如下面的代码：
img {
float: left;
}这样，图片就会在文本的左侧浮动。同样地，大家也可以用float:right设置图片右浮动。
但是，浮动属性也可能会造成页面布局的混乱。如果没有清除浮动，那么页面的其他元素可能会乱流，而且页面高度也无法自动调整。大家可以使用clear属性来防止这种情况的出现：
.clearfix::after {
content: "";
clear: both;
display: block;
}在上面的代码中，大家使用了类名clearfix。这是一个经典的CSS hack，它可以清除浮动带来的影响。大家使用了伪元素::after来插入一个空元素，然后设置clear:both让其放置在浮动元素下方，并且从新的一行开始。
另一种控制图片位置的方法是使用位置属性。通过设置元素的position属性为absolute或fixed，大家可以让其脱离文档流，并且相对于其父元素或浏览器窗口进行定位。例如下面的代码：
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}上面的代码将图片绝对定位于其父元素中心，使用了top和left属性对图片进行位置调整。但是，由于定位元素脱离了文档流，可能会对页面布局带来影响，需要特别注意。
综上所述，CSS控制插入图片位置的方法主要有两种：浮动和位置属性。选择合适的方法取决于具体的需求和页面结构，需要结合实际情况进行权衡。同时，大家需要注意避免因为浮动而导致的页面混乱，或者因为绝对定位脱离文档流而带来的布局问题。