怎么解决 Margin 塌陷问题

Question

父级元素 nav 无法自适应子元素宽高

在nav元素中嵌套一个导航组件，导致nav元素的宽高无法自适应。

如图：

尝试使用了一些清除浮动流的写法全部没有办法重新使nav获取子元素的宽高。没有使父元素自适应子元素的宽高

// 父组件
import BaseNav from './BaseNav';
export default function LayoutMain() {
  return (
    <BrowserRouter>
      <nav 
        className={styles['nav']}
      >
        <BaseNav />
      </nav>


    </BrowserRouter>
  )
}

// 导航组件
export default function BaseNav() {
  console.log( Router, '' );
  return (
    <Menu mode="horizontal" className={styles['nav__menu']}>
      <Menu.Item key="mail">
        Navigation One
      </Menu.Item>
      <Menu.Item key="app" disabled>
        Navigation Two
      </Menu.Item>
    </Menu>
  )
}

// 样式
.nav{
  position: relative;
  background-color: #bf5555;
  border: 1px solid;
}
.nav::before {
  content: "";
  content: "";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.nav__menu {
  position: absolute;
}
.nav__menu::before{
  content: "";
  display: inline-block;
  height: 0;
  clear: both;
  visibility: hidden;
}

Answer 1

因为定位的原因吧

Answer 2

搜索一下 BFC