Skillful use of floating layout to solve height collapse example sharing

question

insert image description here
As shown in the figure, how to achieve this effect?

Breadcrumbs and buttons displayed at both ends of a row
If the breadcrumbs or edit bar exceeds the width, it will be automatically displayed separately

insert image description here

accomplish

Float is used, the green block floats to the left, and the blue block floats to the right. The floating feature is used to achieve the effect that the width exceeds the display of another line, and it is dynamic.

Floating allows an element to break out of the standard flow, moving left or right and occupying the remaining space of its parent element. Floated elements do not affect the layout of other elements, but they create a new block-level box with a set width and height.

Features of floating elements include:

Floated elements fall out of the standard flow (off-label).

Floated elements are displayed on a single line and aligned to the top of the element.

Floated elements will have the properties of inline-block elements.

highly subsidence

Of course, after the child elements are all floating, they will break away from the parent div, causing them to exceed the parent element (the height of the parent element collapses).
How to solve it?
insert image description here
Add overflow: hiddenclear float to parent div.

overflow: hidden is a CSS property used to control whether the content of an element exceeds the bounds of its container. It can clear floats, but only if the float happens inside that element.

When an element contains floats, if the float is not cleared using the clearfix method or other techniques, it may cause damage to the parent element 高度塌陷. To solve this problem, it can be set on the parent element overflow: hidden, so that the floating can be cleared.

Sample code:

<!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>

Summarize

The flex layout is easy to use, but I can't remember to use others. In fact, each attribute has a usage scenario. I originally thought to use flex layout and js dynamic judgment to solve it, and then use floating 3 lines of code to solve it easily!
insert image description here