Question

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

为什么浮动元素在下面一行显示？即使主要内容在浮动元素上方也会出现一行。

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

Browser output

Answer 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或适当的标签（旁边，页眉，页脚，主要，文章等）。例如：

<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>

Answer 2

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

浮动元素出现在下面一行

2 个答案: