浮动元素出现在下面一行答案

【问题标题】：Floated element appears one line below浮动元素出现在下面一行
【发布时间】：2017-09-25 17:18:53
【问题描述】：

这是一个非常简单的 html 代码，用于将侧边栏向右浮动。浏览器输出在下面一行显示侧边栏（浮动元素）。我的浏览器输出图片的链接如下所示

浮动元素怎么会显示在下面一行？甚至主要内容也出现在浮动元素上方一行。

#header {
  background-color: #af7ac5;
  font-size: 90px;
}

#sidebar {
  background-color: #bdc3c7;
  font-size: 30px;
  float: right;
  width: 200px;
  display: inline-block;
}

#maincontent {
  background-color: dc7633;
  font-size: 30px;
  margin-right: 220px;
}

#footer {
  font-size: 50px;
  background-color: #2ecc71;
  clear: right;
}

<p id="header">Header</p>
<p id="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar
</p>


<p id="maincontent">This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content This is main content
  This is main content This is main content
</p>



<p id="footer">Footer</p>

Browser output

【问题讨论】：

标签： html css

【解决方案1】：

这是因为侧边栏有一个margin-top 并且是浮动的（页眉边距 + 侧边栏边距）。

#header{
	
	background-color : 	 #af7ac5 ;
	font-size : 90px;
}

#sidebar{
	
	background-color : 	 #bdc3c7;
	font-size : 30px;
	float : right;
	width : 200px;
    margin-top: 0;
	}


#maincontent{
		
	background-color : 	 dc7633 ;
	font-size : 30px;
	margin-right : 220px;
	}


#footer{
	font-size : 50px;
	background-color : 	#2ecc71 ;
	clear : right;
	}

<html>
<head>
<link type ="text/css" rel="stylesheet" href="MyDesign.css" >
</head>

<body>

	<p id="header">Header</p>
	<p id="sidebar">Sidebar Sidebar Sidebar Sidebar
	Sidebar Sidebar Sidebar Sidebar
	Sidebar Sidebar Sidebar Sidebar
	Sidebar Sidebar Sidebar Sidebar
	</p>
	

	<p id="maincontent">This is main content This is main content 
	This is main content This is main content This is main content 
	This is main content This is main content This is main content
	This is main content This is main content This is main content
	This is main content This is main content This is main content
	</p>


	
	<p id="footer">Footer</p>


</body>
</html>

避免使用像 p,h1 这样的标签来制作容器，因为它们有默认的 css（边距等）。相反，使用 div 或适当的标签（aside、header、footer、main、article 等）。示例：

<body>

    <header id="header">Header</header>
    <aside id="sidebar">Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    Sidebar Sidebar Sidebar Sidebar
    </aside>


    <main id="maincontent">This is main content This is main content 
    This is main content This is main content This is main content 
    This is main content This is main content This is main content
    This is main content This is main content This is main content
    This is main content This is main content This is main content
    </main>



    <footer id="footer">Footer</footer>


</body>

【讨论】：

这不是错误的，但原因是  标签通常在元素前后都有边距，您会看到所有  元素的边距顶部和底部在您的代码中。
我已经更新了答案，以避免使用这些标签
如果这就是主要内容出现在浮动上方一行的原因。我的意思是浮动元素（侧栏）在下方一行，而主要内容在浮动元素上方一行。它们都是段落元素。
Header 和 Main 是没有浮动的块元素，它们会有折叠边距。如果 header 有 20px 边距，而 main 有 30px 边距，它们的距离将为 30px。侧边栏是一个浮动块，边距不会与其他块一起折叠。如果页眉有 20 像素的边距和侧边栏 30 像素，那么它们之间的距离将为 50 像素。见yourwebskills.com/margins.php

【解决方案2】：

这是因为 标记具有以下默认样式属性：margin-top: 30px; margin-bottom: 30px; 因此，您的 似乎被推下。您可以将  更改为 <div> 以避免默认样式，或者只需编写 CSS 规则来覆盖：p.sidebar { margin: 0px 0px 0px 0px; }

【讨论】：

如果这就是主要内容出现在浮动上方一行的原因。我的意思是浮动元素（侧栏）在下方一行，而主要内容在浮动元素上方一行。它们都是段落元素。
@pritijain 这是因为在 HTML 中，只考虑第一个块级元素底部和第二个元素顶部之间的最大边距。由于 header 和主要内容之间的最大边距为 90px，因此它们之间的距离为 90px。由于 float 将一个元素从流中取出，所以在这种情况下侧边栏被排除在外，但您也可以看到主要内容和页脚之间的边距只有 50px（而不是 80）。我仍然建议将上边距设置为 0px。 stackoverflow.com/questions/3906640/css-margins-overlap-problem
为了在柱状设计中获得更好的效果，我还建议使用flexbox。