巧用浮动布局、解决高度塌陷实例分享

news2024/12/23 13:59:06

问题

在这里插入图片描述
如图所示，这种效果该怎么实现呢？

面包屑导航和按钮一行两端显示
面包屑或编辑栏超出宽度则自动另行显示

在这里插入图片描述

实现

采用浮动，绿色块左浮，蓝色块右浮，利用浮动特性实现宽度超出另一行显示的效果，并是动态的。

浮动可以让一个元素脱离标准流，向左或向右移动并占据其父元素的剩余空间。浮动元素不会影响其他元素的布局，但是它们会创建一个新的块级框，可以设置宽度和高度。

浮动元素的特性包括：

浮动元素会脱离标准流(脱标)。
浮动的元素会一行内显示并且元素顶部对齐。
浮动的元素会具有行内块元素的特性。

高度塌陷

当然，子元素都浮动以后，会脱离出父div外，导致超出父元素（父元素高度塌陷）。
怎么解决呢？
在这里插入图片描述
给父div加overflow: hidden清除浮动。

overflow: hidden 是一个 CSS 属性，用于控制元素的内容是否超出其容器的边界。它可以清除浮动，但前提是浮动发生在该元素内部。

当一个元素包含浮动时，如果不使用 clearfix 方法或其他技术来清除浮动，可能会导致父元素高度塌陷。为了解决这个问题，可以在父元素上设置 overflow: hidden,这样就可以清除浮动了。

示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  overflow: hidden; /* 清除浮动 */;
  background-color: #666;
}
.childl {
  float: left;
}
.childr {
  float: right;
}
</style>
</head>
<body>
<div class="parent">
  <div class="childl"></div>
  <div class="childr"></div>
</div>
</body>
</html>