HTML和CSS中float与width属性不符合预期的问题求助

问题1：导航栏浮动元素干扰下方内容 #

原因分析 #

导航栏里的.nav-logo-section和.title-text使用了float: left，但父元素<nav>未处理浮动塌陷——浮动元素会脱离标准文档流，导致<nav>高度归零，下方的.main-content会被导航栏的浮动元素“挤向”右侧，无法正常靠左对齐。

修复方案 #

给<nav>添加清除浮动的样式，推荐用clearfix伪元素（不会隐藏溢出内容，兼容性更强）：

nav::after {
    content: "";
    display: table;
    clear: both;
}

如果导航栏没有需要溢出显示的内容（如下拉菜单），也可以直接给<nav>加overflow: hidden，实现更简单。

问题2：移除.main-content的float后无法与.box并排，width表现异常 #

原因分析 #

• 块级元素默认会占满容器宽度，去掉float: left后，.main-content会占据整行，.box只能排在其下方。
• width: calc(50% - 150px)看起来像margin，是因为标准流中元素的width仅计算内容宽度，加上左右各75px的padding，实际总宽度会超过50%，再加上前面浮动元素的干扰，布局彻底混乱。

修复方案 #

用Flex布局替代float，这是现代布局的首选方案，能彻底规避float带来的各类问题：

1. 给.main-content和.box的父容器#irrelevant添加display: flex，让两个子元素并排。
2. 移除.main-content和.box的float属性，调整margin避免页面溢出。

完整修正代码 #

HTML（先修复原代码中未闭合的<div id="navRight"标签）

<nav>
    <a class="nav-title-link" href="/">
        <div class="nav-logo-section">
            <div id="titleText" class="title-text">
                <h2>My Title</h2>
            </div>
            <img class="nav-logo" src="MY SOURCE">
        </div>
    </a>
    <div id="navRight" class="nav-right">
        <!-- 无关内容 -->
    </div>
</nav>
<div id="irrelevant">
    <div class="main-content">
        <h1 class="main-title">Catchphrase</h1>
        <p class="main-paragraph">Some text here</p>
    </div>
    <div id="box" class="box">
       <!-- 盒子内容 -->
    </div>
</div>

CSS

/* 修复导航栏浮动塌陷 */
nav::after {
    content: "";
    display: table;
    clear: both;
}

.nav-logo-section {
    margin: 5px 10px 5px 30px;
    float: left;
}
.nav-logo {
    height: 50px;
}
.title-text {
    color: #252f3f;
    line-height: 0.5;
    float: left;
}

/* Flex布局实现元素并排 */
#irrelevant {
    display: flex;
    align-items: flex-start; /* 让两个元素顶部对齐 */
    gap: 20px; /* 可选：设置元素间的间距 */
    padding: 0 20px; /* 可选：设置整体左右边距 */
}

.main-content {
    padding: 50px 75px 0 75px;
    width: calc(50% - 150px);
}

.box {
    margin: 75px 0 0 0;
    width: 400px;
    padding: 20px;
    border-radius: 35px;
    box-shadow: 0px 5px 10px 0 rgba(0, 0, 0, 0.3);
    background: white;
}

备选方案（坚持使用float的情况） #

如果不想切换到Flex布局，必须先给<nav>清除浮动，然后：

• 给.main-content保留float: left
• 确保.main-content的总宽度（width+padding+margin）加上.box的总宽度不超过容器宽度，避免换行
• 给#irrelevant也添加clearfix，防止下方元素被这两个浮动元素干扰

内容的提问来源于stack exchange，提问作者Bob The Builder