关于减少脱标流使用的一个小技巧
程序员文章站
2024-01-28 22:01:52
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.father{
width: 300px;
height: 300px;
background:red;
}
.son{
width: 100px;
height: 100px;
background:#000;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>如上代码，是很简单的两个div嵌套，此时子盒子应在父盒子左上角，如图：
现在如果想要子盒子到父盒子的右上角，我们可以用float:right很容易使他浮动到位置，但由于浮动会使其脱离标准文档流，如果想少使用此方法，我们可以这样修改：
.son{
width: 100px;
height: 100px;
background:#000;
/*设置盒子左外边距为auto*/
margin-left:auto;
}对于margin-left:auto;一句，我们可以简单的理解：当我们设置margin:0 auto;时，就像左右两边各有一个力推动盒子，盒子到达居中位置时，两个力达到平衡。现在只设置左边，盒子会被尽量向右推动，也就到达父盒子右边界处了。
推荐阅读