所以这又与我的另一个问题链接到同一个网站，这是另一个可能很简单的定位问题。 我有一个容器div，我希望在其中容纳两个div，一个占据右边容器的第3个包含图片，一个包含左边的文本。然而，出于某种原因，当告诉两个内部div向左浮动时，容器似乎消失了，当使用inspect元素时，是在一个我无法解释的奇怪的地方。
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Toby King - Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
<div class="menu">
<div class="menuBit">
<h2 class="menuContent">HOME</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">BLOG</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">WORK</h2>
</div>
</div>
</div>
<div class="main">
<div class="textSection">
<div class="mainTextSection">
<h1 class="maintext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rhoncus erat nec porttitor facilisis. In hac habitasse platea dictumst. Mauris id faucibus arcu. Mauris non orci mauris. Vivamus a porta odio. Praesent at purus ante. Quisque magna odio, elementum ut facilisis vitae, consequat at tellus. Praesent nulla est, ultrices sit amet sagittis eget, consequat id justo. Integer elementum in nibh eu ultricies. Integer fringilla urna in mollis accumsan. Etiam iaculis urna et malesuada tincidunt. Nunc dignissim purus eu tempor bibendum.</h1>
</div>
<div class="mainPictureSection">
<img src="images/Example.svg">
</div>
</div>
</div>
<div id="footer">
<h2 class="social">CONTACT:</h2>
<img src="images/fb.png" class="social">
<h2 class="social">some text</h2>
<img src="images/insta.png" class="social">
<h2 class="social">some text</h2>
</div>
</body>
</html>
CSS：
#banner {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: fixed;
background-image: url("images/menuHor.png");
}
.menuBit {
height: 40px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 10px;
}
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
}
.menuContent {
font-family: "cicle-gordita";
font-size: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #ffffff;
}
.main {
position: fixed;
margin: 0px;
margin-top:50px;
padding: 0px;
width: 100%;
height: 94.7916666667%;
overflow: scroll;
background: url("images/backgr.png");
}
.maintext {
font-family: "cicle-gordita";
}
.textSection {
width: 65%;
height: auto;
background: #FFFFFF;
margin-right: 17.5%;
margin-left: 17.5%;
margin-top: 2.5%;
margin-bottom: 5%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
.mainPictureSection {
height: auto;
width: 21.67%;
float: left;
overflow: hidden;
margin: 0px;
padding: 0px;
}
.mainTextSection {
height:auto;
width: 43.33%;
float: left;
margin: 0px;
padding: 0px;
}
#footer {
width: 100%;
height: 30px;
clear: both;
position: fixed;
bottom: 0;
background-image: url("images/menuHor.png");
}
.social {
float: left;
padding: 0;
margin-top: 0px;
margin-bottom: 2.5px;
margin-left: 10px;
font-family: "cicle-gordita";
color: #ffffff;
}
.social h2 {
margin-top: 5px;
}
Jscript / jQuery文件只是淡入淡出，但对定位没有任何影响
答案 0 :(得分：1)
将float: left更改为display: inline-block应该是执行此操作的最佳方式。
display: inline-block增加了空格。删除此功能的一种方法是在div s：
<div class="container">
<div class="child">
</div><!--
--><div class="child">
</div>
</div>
或让div内联如下：
<div class="container">
<div class="child"></div><div class="child"></div>
</div>
要在顶部对齐它们，请将vertical-align: top添加到子div。
答案 1 :(得分：0)
如果容器只有浮动子容器，其高度将折叠，因为在计算容器高度 时不考虑 浮动元素。您需要清除这些浮动元素，以使容器实际上包含浮动子元素。
实现此目的的一种方法是添加一个clearfix并将该类放在容器元素上（取自http://nicolasgallagher.com/micro-clearfix-hack/）：
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
但是，有一个（多个）替代方案，最常见的可能是使用display: inline-block而不是float: left。
不幸的是，查看以下示例，您会发现它最初无法正常工作：
.container {
background-color: #a00;
}
.child {
background-color: #f0f0f0;
display: inline-block;
width: 50%;
}<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>
您会看到第二个容器 换行到新行，即使两者都已定义为容器宽度的50％的公平份额
只要您的HTML在内联块元素之间包含任何类型的空格，它就会被渲染并且 消耗空间 。
避免这种情况最常见的方法是设置容器font-size: 0;（这并不总是解决方案，但在大多数情况下），并在子项上重新设置它根据需要：
.container {
background-color: #a00;
font-size: 0;
}
.child {
background-color: #f0f0f0;
display: inline-block;
font-size: 16px;
width: 50%;
}<div class="container">
<div class="child">Child One</div>
<div class="child">Child Two</div>
</div>