极客观点
项目管理
HarmonyOS
这是w3school上的一个例子，代码如下：
<html>
<head>
<style type = "text/css">
div.container {
float: left;
width: 100%;
margin: 0px;
border: 1px solid gray;
line-height: 150%;
}
div.header, div.footer {
padding: 0.5em;
color: white;
background-color: gray;
clear: both;
}
h1.header {
padding: 0;
margin: 0;
}
div.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
border-right: 1px solid gray;
}
div.content {
margin-left:190px;
padding: 1em;
}
</style>
</head>
<body>
<div class = "container">
<div class = "header"><h1 class = "header">W3school.com</h1></div>
<div class = "left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything."William of Ockham(1285-1349)</p></div>
<div class = "content">
<h2>Free WebBuilding Tutorials</h2>
<p>At W3school.com.cn you will find all the Web-building tutorials you need, from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>
<div class = "footer">Copyright 2008 by YingKe Investment.</div>
</div>
</body>
</html>
其中div.left的宽度是160px,而div.content的左边距是190px，但是视觉上div.left的宽度要比div.content的左边距宽很多啊。如下图：
请问这是为什么？
由于你设置了浮动所以元素都脱离了文档流，这种简单的排列并不推荐设置浮动，对页面其他元素有很大的影响。
关于浮动相对定位和绝对定位，参见如下：http://blog.sina.com.cn/s/blo...
https://segmentfault.com/q/10...
可以看看控制台就很清楚