CSS'浮动：对；'问题答案

【问题标题】：CSS 'float: right;' issuesCSS'浮动：对；'问题
【发布时间】：2018-05-18 22:29:38
【问题描述】：

我目前在 HTML 中设置了一个简单的标题，并且正在使用 CSS 来设置它的样式。我创建了多种样式：“#header”和“#header #right”。当我使用'float：right;'对于我提到的第二种样式，它将文本几乎完全下移到标题下方。

代码：

index.html:

<html>
<link rel="icon" type="image/png" href="images/favicon.png">
<link href='main.css' type='text/css' rel=Stylesheet>
<head>
<title>FriendSub</title>
</head>
<body>

<div id='header'>
<font size='+3'>FriendSub &nbsp; &nbsp;</font>
<a href='index.php'>Home</a> | 
<a href=''>Subscribers</a> |
<a href=''>Subscriptions</a>
<div id='right'> 
  <p><a href=''>Log in</a> | <a href='register.php'>Register</a></p></div></div>
</body>
</html>

main.css：

@charset "utf-8";
/* CSS Document */

#header {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    background-color: #093;
    border-top-left-radius: 18;
    border-top-right-radius: 18;
    width: 96%;
    height: 58px;
    margin: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 14px;
    padding-right: 14px;
    color: #FFF;    
    font-weight: bold;
    text-shadow: #000 0.1em 0.1em 0.2em;
}

#header a {
    color: #FFF;
    text-decoration: none;
    text-shadow: #000 0.1em 0.1em 0.2em;
}

#header a:hover {
    color: #CCC;
}

#header #right {
    float: right;
    width: 220px;
    background-color: #093;
}

#content {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    background-color: #CCC;
    width: 1000;
    height: 58px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 14px;
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: 600;
    font-weight: bold;
    border-bottom-left-radius: 18;
    border-bottom-right-radius: 18;
    line-height: 1%;
}

这里的JSFiddle：http://jsfiddle.net/aKtep/

【问题讨论】：

添加您所看到的内容和所需结果的屏幕截图可能会有所帮助。

标签： html css css-float

【解决方案1】：

尝试在关闭#right 后立即添加<div style='clear:both'></div> 看看会发生什么

【讨论】：

【解决方案2】：

一个快速的解决方案（假设我了解您想要的结果）是重新排列元素，以便您想要浮动到右侧的项目是标题中的第一个。浮动元素会从文档的正常流程中移除，并且通常会被推送到下一行，除非它们有足够的空间。但是，如果浮动元素首先出现，则后续元素将自行排列在它周围。见fiddle。

【讨论】：

如果你有时间，我建议你阅读浮动元素，因为我的解释过于简单化了。

【解决方案3】：

从 Login/Register 链接周围删除 p 标签，修改 #header #right 以包含 padding-top:10px；当你真的不需要时，你也使用了太多的 div（divitus）

【讨论】：

【解决方案4】：

您需要为容器#header 指定一个单位宽度，以容纳其所有内容。

我所做的只是 here 将 #header 宽度从 96% 更改为 960px

【讨论】：

【解决方案5】：

我想我不是 100% 确定你在问什么，但听起来你的正常标题正在将正确的标题向下推到它下面。据我所知，这可能与您的标题容器的宽度为 96% 有关。然后#right #header 具有像素宽度，原始标题容器可能没有足够的空间容纳那么多像素。尝试将#header #right 的宽度更改为 %

一个忠告，不要使用ID的这么多。您正在创建非常高的特异性，以后可能会让您感到痛苦。

【讨论】：

【解决方案6】：

如前所述，您应该在 #right 段之后使用clear: float。

原因是the clear property 与the float property 直接相关。 它指定一个元素是否应该靠近浮动元素，或者是否应该移动到它们下方。此属性适用于浮动和非浮动元素。

【讨论】：