CSS浮动和重叠框

我一直在搞乱CSS,试图了解浮动等等.这是问题的样子：

如你所见,黄色的盒子漂浮在灰色的后面并经过它.如何让它在方框2之前停止？ Here is my code：

<style>
/*resests begin*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    /*vertical-align: baseline; */
    font-weight:normal;
}

article,section {
  display: block;
}
/*resests end*/


body {
    font-size:16px;
    margin:5px;

}

h1 {font-size:2em;}

nav {
    background-color:#ccc;
    padding:5px;
    width:200px;
    height:200px;
    margin:10px;
}

#a {
    background-color:#FFC;
    padding:10px;
}

.r-set {
    padding-left:10px;
    float:right;
}


</style>
</head>

<body>
<h1>Title</h1>

<nav class="r-set">
  <p><a href="#">Two</a></p>
</nav>

<div id="a">
  <h3>One</h3>
</div>

</body>
</html>

解决方法

浮动元素时,将其从DOM流中取出.要使它与Box One交互,您还需要浮动Box One：

#a {
    background-color: #FFFFCC;
    float: left;
    padding: 10px;
    width: 190px;
}

注意宽度也是指定的.这是因为您希望将两个框放在包装器中并指定它的宽度：

HTML

<div id="wrapper">      
    <h1>Title</h1>
    <nav class="r-set">
        <p><a href="#">Two</a></p>
    </nav>
    <div id="a">
        <h3>One</h3>
    </div>
</div>

CSS

#wrapper{
    width: 445px;
}

每当你浮动元素时,最好将它们放在这样的包装器中,这样你就可以将它们带回DOM中了.这样可以避免在Box 2后面遇到Box One渲染问题.

这是jsFiddle将它们整合在一起.顺便说一句,如果你想让Box Two与Box One完全齐平,那就把它的左边缘拿走.

编辑：

要使Box Two static和Box One可扩展,您应该使用相同的CSS和标记.只需取走Box One的浮动和宽度属性,并给它一个225px的右边距(Box 2的宽度减去右边距).这是更新的jsFiddle.

CSS浮动和重叠框

解决方法

相关文章