Question

我希望#cart转到页面的右上方。当我添加浮点数时，它会下降。为什么？我将代码和图像放在带有，然后没有浮动的地方。

* {
  margin: 0;
}

#fl {
  background-color: #fff;
  padding: 10px;
  color: transparent;
  font-size: 20px;
  height: 60px;
  margin-top: 100px;
  text-align: center;
  line-height: 60px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.8;
  border-left: 5px solid black;
  font-family: 'Nanum Gothic', sans-serif;
}

#log {
  height: 60px;
  margin-top: 2px;
}

#container {
  width: 70%;
  height: 70px;
  background-color: rgba(111, 250, 171, 0.5);
  box-shadow: 1px 1px 2px black;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row-reverse;
}

#cart {
  font-size: 30px;
  float: right;
  height: 40px;
}

<div id="cart">CART</div>
<div id="fl">
  <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1>
</div>
<div id="container">
  <div class="greensale">
    <span class="more">400ml</span> for just <span class="more">200$</span>
  </div>
  <div id="log">
    <img src="logo.png" height="60" width="60" />
  </div>
</div>

Answer 1

当您使元素浮动时，下一个元素（id="fl"）将成为第一个流入元素，并且其上边距将随着容器（body）的上边距而折叠。就像您将容器的顶部边距增加了 margin-top: 100px;，由于考虑到这一点放置了浮动元素，因此该元素将跳到其新位置。

为避免这种情况，请you need to avoid margin to collapse：

* {
  margin: 0;
}
body {
  padding-top:1px;
}

#fl {
  background-color: #fff;
  padding: 10px;
  color: transparent;
  font-size: 20px;
  height: 60px;
  margin-top: 100px;
  text-align: center;
  line-height: 60px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.8;
  border-left: 5px solid black;
  font-family: 'Nanum Gothic', sans-serif;
}

#log {
  height: 60px;
  margin-top: 2px;
}

#container {
  width: 70%;
  height: 70px;
  background-color: rgba(111, 250, 171, 0.5);
  box-shadow: 1px 1px 2px black;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row-reverse;
}

#cart {
  font-size: 30px;
  float: right;
  height: 40px;
}

<div id="cart">CART</div>
<div id="fl">
  <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1>
</div>
<div id="container">
  <div class="greensale">
    <span class="more">400ml</span> for just <span class="more">200$</span>
  </div>
 
</div>

为身体增加背景将使您更好地看到问题。注释/取消注释浮动属性以查看发生了什么：

* {
  margin: 0;
}
body {
  background:red;
}
html {
 background:#fff;
}

#fl {
  background-color: #fff;
  padding: 10px;
  color: transparent;
  font-size: 20px;
  height: 60px;
  margin-top: 100px;
  text-align: center;
  line-height: 60px;
  width: 70%;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.8;
  border-left: 5px solid black;
  font-family: 'Nanum Gothic', sans-serif;
}

#log {
  height: 60px;
  margin-top: 2px;
}

#container {
  width: 70%;
  height: 70px;
  background-color: rgba(111, 250, 171, 0.5);
  box-shadow: 1px 1px 2px black;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  flex-direction: row-reverse;
}

#cart {
  font-size: 30px;
  float: right;
  height: 40px;
}

<div id="cart">CART</div>
<div id="fl">
  <h1><span>BUY EXCLUSIVE ONDRIWATER TODAY</span></h1>
</div>
<div id="container">
  <div class="greensale">
    <span class="more">400ml</span> for just <span class="more">200$</span>
  </div>

</div>

Answer 2

在您的代码中#cart在页面的顶部和右侧！因此，您可以使用绝对位置，例如：

#cart {
  font-size: 30px;
  right: 0;
  top:0;
  height: 40px;
  position:absolute;
}

Answer 3

代替float: right进行text-align: right。浮动样式会将#cart元素与#fl

对齐

为什么当我将float：right放在<div>上时会下降？

3 个答案: