CSS浮动没有正确打破答案

【问题标题】：CSS Floats not breaking properlyCSS浮动没有正确打破
【发布时间】：2015-08-05 13:22:57
【问题描述】：

我有一个 CSS 文件，mastercss4.css：

#content {
    width: 1000px;
    height: 800px;
    background-color: #b0c4de;
    margin-left: auto;
    margin-right: auto;
}

#top {
    width: 1000px;
    height: 141px;
    background-color: red;
}

#topleft {
    width: 193px;
    height: 141px;
    background-color: yellow;
    float: left;       
}

#topmid {
    width: 15px;
    height: 141px;
    background-color: green;
    float: left;
}

#topright {
    width: 797px;
    height: 141px;
    background-color: cyan;
    float: left;
}

#middle {
    width: 1000px;
    height: 598px;
    background-color: white;
    float: clear;
}

#midleft {
    width: 188px;
    height: 598px;
    background-color: aquamarine;
    float: left;    
}

#midmid {
    width: 15px;
    height: 598px;
    background-color: orange;
    float: left;
}

#midright {
    width: 797px;
    height: 598px;
    background-color: blueviolet;
    float: left;
}

#bottom {
    width: 1000px;
    height: 61px;
    background-color: blue;
    float: clear;
}

body {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    font-size: 12px;
    background-color: #000000;
}

我有一个 HTML 文件，default09.html:

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="description" content="test">
        <meta name="author" content="Algomeysa">
        <title>test</title>
        <link rel="stylesheet" href="mastercss4.css">
    </head>
    <body>
        <div id="content">
            <div id="top">
                <div id="topleft">tl</div> 
                <div id="topmid"></div> 
                <div id="topright">tr</div> 
            </div> 
            <div id="middle">
                <div id="midleft">ml</div> 
                <div id="midmid"></div> 
                <div id="midright">mr</div> 
            </div> 
            <div id="bottom">bottom</div> 
        </div> 
    </body>
</html>

结果应该是红色、白色和蓝色条完全被覆盖顶行：黄框、细绿款、青框中排：海蓝宝石盒，薄橙款，蓝紫盒底行：蓝框

相反，右上角的青色框会下降到左中，而其他所有内容都是交错的。

谁能发现我做错了什么？

【问题讨论】：

任何答案对您有帮助吗？如果是，请将其中一项标记为正确答案。如果您自己找到答案，请将解决方案添加为答案并将其标记为正确答案。

标签： css html

【解决方案1】：

将右上角的宽度设置为 792 像素。您比父容器宽度多 5 个像素：

#topright{
  width: 792px;
}

【讨论】：

【解决方案2】：

clear 不是 float 属性的有效值。 left、right、none、initial 和 inherit 是 float 的唯一有效值。

clear 本身是一个 css 属性，并接受 left、right、both、none、initial 或 inherit。

您的代码中似乎有几个float: clear; 实例。将它们更改为clear: both; 之类的东西，你应该没问题。

【讨论】：

【解决方案3】：

只要改变就简单了

浮动：无

到 #topright

并根据需要减小右上角的宽度

【讨论】：