我正在尝试将嵌套的 <div id="sidebar">使用 float: left; 向左移动，但它不起作用。相反，它只是停留在页面中间。
<!DOCTYPE html>
<html lange="en">
<head>
<meta charset="utf-8" />
<title>Enhanced</title>
<style>
body {
background : #b3d9ff;
margin : 0;
padding: 0;
font-family : Futura;
}
#wrapper {
width: 960px;
height: auto;
background: #cce5ff;
border-left: 5px solid #737373;
border-right: 5px solid #737373;
overflow : auto;
margin : 0 auto;
padding: 10px;
}
#header {
width:100%;
height:100px;
border-bottom: 3px solid #000;
}
#logo {
float: left;
margin: 15px 0px 0px 80px;
}
#social {
float: right;
margin: 20px 30px 0px 0px;
}
#social ul li {
float: left;
list-style: none;
padding-right: 5px;
}
#sidebar {
float: left;
width: 275px;
height: 100%;
}
#menu {
float: left;
height: auto;
width: 200px;
}
#menu ul li {
list-style : none;
padding: 0px;
text-align: center;
}
#menu ul li a {
color: #666666;
text-decoration: none;
display: block;
}
#menu ul li a:visited{
color:purple;
}
#menu ul li a:hover {
color:black;
}
#content {
float: left;
width: 655px;
height: 100%;
padding-left: 15px;
letter-spacing : 1;
border-left: 3px solid black;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<a name="top"></a>
<div id="logo">
<img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
</div> <!-- End of logo -->
<div id="social">
<ul>
<li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55" alt="github" title="github"></a></li>
</ul>
</div> <!-- End of social -->
</div> <!-- End of header -->
<div id="sidebar">
<div id="menu">
<ul>
<li><h4><a href="#home">Home</a></h4></li>
</ul>
</div> <!-- End of menu -->
</div> <!-- End of sidebar -->
<div id="content">
</div> <!-- End of content -->
</div> <!-- End of wrapper -->
</body>
</html>
最佳答案
使用 float 从正常文档流中移除元素。您有多个元素在包装器元素中向左浮动，因此您需要在侧边栏也向左浮动之前清除它们。但是，我建议完全去掉 Logo 周围的 div，因为它并不是真正必要的(其中唯一的东西是你的 img，你可以直接设置样式)。
通过删除包装 div 并将其选择器更改为 #header > img {}，您还删除了对 float 的需要:
body {
background: #b3d9ff;
margin: 0;
padding: 0;
font-family: Futura;
}
#wrapper {
width: 960px;
height: auto;
background: #cce5ff;
border-left: 5px solid #737373;
border-right: 5px solid #737373;
overflow: auto;
margin: 0 auto;
padding: 10px;
}
#header {
width: 100%;
height: 100px;
border-bottom: 3px solid #000;
clear: right;
}
#header > img {
margin: 15px 0px 0px 80px;
}
#social {
float: right;
margin: 20px 30px 0px 0px;
}
#social ul li {
float: left;
list-style: none;
padding-right: 5px;
}
#sidebar {
float: left;
width: 275px;
height: 100%;
}
#menu {
float: left;
height: auto;
width: 200px;
}
#menu ul li {
list-style: none;
padding: 0px;
text-align: center;
}
#menu ul li a {
color: #666666;
text-decoration: none;
display: block;
}
#menu ul li a:visited {
color: purple;
}
#menu ul li a:hover {
color: black;
}
#content {
float: left;
width: 655px;
height: 100%;
padding-left: 15px;
letter-spacing: 1;
border-left: 3px solid black;
}<div id="wrapper">
<div id="header">
<a name="top"></a>
<img src="https://janikvonrotz.ch/wp-content/uploads/2015/10/Python-Logo.png" width="232" height="101" alt="Logo" title="python">
<!-- End of logo -->
<div id="social">
<ul>
<li><a href="https://github.com/GallardoBrayan" target="_blank"><img src="http://icons.iconarchive.com/icons/limav/flat-gradient-social/512/Github-icon.png" width="55" height="55" alt="github" title="github"></a></li>
</ul>
</div> <!-- End of social -->
</div> <!-- End of header -->
<div id="sidebar">
<div id="menu">
<ul>
<li><h4><a href="#home">Home</a></h4></li>
</ul>
</div> <!-- End of menu -->
</div> <!-- End of sidebar -->
<div id="content">
</div> <!-- End of content -->
</div> <!-- End of wrapper -->关于html - 为什么我的 div 没有向左浮动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36242586/