浮动后：左和浮动：右清除：两者？

Question

我有一个快速的问题。 我用这个 html 代码创建了一个导航栏：

 <.-- Header and searchbar --> <header> <div class="header"> <div class="left"> <a href=""> <img id="logo" src="pictures/airbnb2.png" alt="Airbnb Logo"> </a> </div> <nav> <ul class="right navbar"> <li><a href="">Gastgeber werden</a></li> <li><a href="">Hilfe</a></li> <li><a href="">Registrieren</a></li> <li><a href="">Log-in</a></li> </ul> </nav> </div> </header>

所以我的问题是如何正确清除此代码？ 我必须做 clear: right in the next div 还是 clear: both？ 我先向左（左班）浮动，然后向右（右班）浮动。

谢谢;）

Answer 1

clear:left是一个关键字，指示元素向下移动以清除过去的左浮动。

由于您在float: left之后有一个float: right right ，如果您只使用clear: right您的元素将出现在 header 下，因为您清除了最后一个浮动 object。

如果使用clear: left ，您将清除左侧浮动元素，但不会清除右侧浮动元素，因此下一个元素将出现在左侧浮动元素下方。

所以在这种情况下，如果你使用clear: both ，你会做同样的事情clear: right 。

clear: both被使用，所以新元素的两边都没有浮动元素，这不是你在做什么。

https://developer.mozilla.org/en-US/docs/Web/CSS/clear