html - div 没有正确 float - html

Question

如果有人能帮我解决这个问题，我将不胜感激。

所以，在我的页面中，我有两个部分，一个向右浮动，另一个是向左浮动的侧边栏 ... - 并排，但是当我尝试在任何浏览器上运行它时，左边的 div 很好，但右边的 div 显示在左边的 div 下方，我彻底搜索了这个但没有找到任何东西。

这是我的 css 和 HTML 页面:

主页:

    <div id="page">
        <div id="main_sidebar">

        <div class="main_top_sidebar">


        </div>


        <div class="main_body_sidebar">

            <p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT          SOME TEXT </p>

        </div>


        <div class="main_bottom_sidebar"></div>

    </div>


    <div id="main">


        <div class="main_top">
            <h1> Home </h1>

        </div>


        <div class="main_body">

            <p> SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT SOME TEXT       SOME TEXT </p>

        </div>


        <div class="main_bottom"></div>

    </div>

    </div>

CSS 表:

html, body {
text-align: center;
}
p {text-align: left;}

body {
margin: 0;
padding: 0;
background: #C1C1C1;
background-image:url('background2.png');
text-align: left;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 13px;
color: #F1F5F8;
}
*
{
 margin: 0 auto 0 auto;
 text-align:left;}


html, body {
text-align: center;
}
p {text-align: left;}




#header h1
{
padding-top: 14px;
display:block;
float:left;
line-height:20px;
margin-left:17px;
width:260px;
color:#FFDE00;
text-align:left;
font-size:17px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
float:left;

}


#header ul {
padding-left: 100px;
list-style-type: none;
height:21px;
text-align:center;
height:85px;
overflow:hidden;
}
#header ul li , #header ul li a, #header ul li a:visited{
    display:block;
    float:left;
margin: 0px;
text-align:center;
line-height:72px;
width:133px;
color:#FFFFFF;
font-size:20px;
font-weight:bold;
text-decoration:none;
}

#header ul li a:hover{
color:#CCCCCC;
}



#main 
{
margin-top:10px;
margin-bottom:10px;
}


#main .main_top
{
float: right;
height:85px;
width:921px;
background-image:url(main_top.png);
background-repeat:no-repeat;
}

#main .main_body
{

padding-left:0px;
float: right;
height:auto;
width:921px;
background-image:url(main_body.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;

}

#main .main_bottom
{
float: right;
height:8px;
width:921px;
background-image:url(main_bottom.png);
background-repeat:no-repeat;
}

#main .main_top h1
{
font-size:24px;
line-height:85px;
color:#000000;
padding-left:25px;
background-position:right;
background-repeat:no-repeat;
margin-right:25px;
}

#main .main_body p
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

#main .main_body ul li 
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}




#page
{
  margin: 0 auto 0 auto; 
      margin-top:25px;
  display: block; 
  height:auto;
  position: relative; 
  overflow: hidden; 
  width: 1151px;
}

#header
{
background-image:url(header.png);
border-radius:15px;
background-repeat:no-repeat;
width:1151px;
height:134px;
}

#float {

width:1151px;
border-radius:15px;
height:170px;
border-color:#FFDE00;
border-style: solid;
border-width:2px ;
background-color:#404040;
color:#ffffff; 

}

#float ul li {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:14px
}

#footer {
float: right;
display:block;
width: 1151px;
height:74px;
background: url(footer.png) no-repeat;
border-radius: 15px;
text-align:right;
font-size:9px;
line-height:75px;
clear:both;
}

#footer p{
font-size: 12px;
text-align:center;
padding-top: 17px;
}

#footer, #footer a, #footer a:visited{
color:#FFDE00;
}

#footer a:hover{
text-decoration:none;
color:#CCCCCC;
}

#main_sidebar 
{
margin-top:10px;
margin-bottom:10px;

}


#main_sidebar .main_body_sidebar
{

padding-left:0px;
float: left;
height:auto;
width:230px;
background-image:url(main_body_sidebar.png);
background-repeat:repeat-y;
color:#000000;
padding-bottom:20px;
clear: left;


}

#main_sidebar .main_bottom_sidebar
{
float: left;
height:8px;
    width:230px;
background-image:url(main_bottom_sidebar.png);
background-repeat:no-repeat;
clear: left;
}

#main_sidebar .main_top_sidebar
{
float: left;
    height:85px;
    width:230px;
background-image:url(main_top_sidebar.png);
background-repeat:no-repeat;
clear: left;
}

    #main_sidebar .main_top_sidebar h1
{
font-size:24px;
line-height:85px;
    color:#000000;
padding-left:25px;
background-position:left;
background-repeat:no-repeat;
margin-right:25px;
}

#main_sidebar .main_body_sidebar p
{

line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

#main_sidebar .main_body_sidebar ul li 
{
line-height:19px;
letter-spacing:1px;
padding-bottom:15px;
padding-left:20px;
padding-right:20px;
}

Answer 1

有两点我想指出。

1. 将您的 float 内容放入您的标记中，因为回顾您的 CSS 以找出哪些内容是 float 的/哪些内容不是 float 的很烦人，并且可能会导致意想不到的后果
2. 确保添加一个清晰的元素作为任何 float 元素的最后一个兄弟元素，这将解决 IE 中的 float 错误

示例:

CSS:

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear {
  clear: both;
}

HTML

<div class="fl">
  <!-- Contents of first floated item here -->
<div>
<div class="fl">
  <!-- Contents of second floated item here -->
<div>
<div class="clear">
  <!-- Leave this empty -->
</div>