遇到浮动内容时，粘性导航会中断？
Sticky navigation breaks when encounters floated content?
出于教学目的，我正在使用 CSS 中最基本的部分。我有一个导航栏设置为 position: sticky 效果很好，直到它与页面下方的一组浮动列交互。
gif of site scrolling and breaking nav
我不确定这是因为浮动，还是因为我的布局简单性计算不当。现在，2 列布局使用：
#main-menu {
width: 100%;
height: auto;
text-align: right;
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
}
.column {
width: 50%;
float: left;
}
使用内联块显示有效并且不会影响粘性菜单，但正如预期的那样，我无法将它们设置为 50% 宽度。修复会很好，但也能解释我为什么会遇到这种情况。
谢谢！
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
<a href="#">Title</a>
</div>
<div class="menu-item">
<a href="#">L1</a>
</div>
<div class="menu-item">
<a href="#">L2</a>
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>
浮动元素不再在 DOM 的正常流动中，降低了 body 的整体高度。使用检查器，你可以看到这个（蓝色代表 body 的高度）：
因此，当您遇到浮动时，相对于 body 的 position: sticky 会出现滚动。
一个"fix"是为了清除你的浮动。我将以下 clearfix 应用于 body:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
这是带有演示的 snippet：
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
<a href="#">Title</a>
</div>
<div class="menu-item">
<a href="#">L1</a>
</div>
<div class="menu-item">
<a href="#">L2</a>
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>
出于教学目的，我正在使用 CSS 中最基本的部分。我有一个导航栏设置为 position: sticky 效果很好，直到它与页面下方的一组浮动列交互。
gif of site scrolling and breaking nav
我不确定这是因为浮动，还是因为我的布局简单性计算不当。现在，2 列布局使用：
#main-menu {
width: 100%;
height: auto;
text-align: right;
position: sticky;
position: -webkit-sticky;
top: 0px;
z-index: 2;
}
.column {
width: 50%;
float: left;
}
使用内联块显示有效并且不会影响粘性菜单，但正如预期的那样，我无法将它们设置为 50% 宽度。修复会很好，但也能解释我为什么会遇到这种情况。
谢谢！
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
<a href="#">Title</a>
</div>
<div class="menu-item">
<a href="#">L1</a>
</div>
<div class="menu-item">
<a href="#">L2</a>
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>
浮动元素不再在 DOM 的正常流动中，降低了 body 的整体高度。使用检查器，你可以看到这个（蓝色代表 body 的高度）：
因此，当您遇到浮动时，相对于 body 的 position: sticky 会出现滚动。
一个"fix"是为了清除你的浮动。我将以下 clearfix 应用于 body:
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
这是带有演示的 snippet：
body:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#main-menu {
width: 100%;
height: auto;
background-color: #222222;
line-height: 2em;
text-align: right;
position: sticky;
position: -webkit-sticky; /* Safari */
top: 0px;
z-index: 2;
}
.site-name {
float: left;
margin: auto 1em;
padding: 0.5em 1em;
}
#main-menu a {
color: #FFFFFF;
text-decoration: none;
}
#main-menu .site-name a:hover {
color: #00BBBB;
}
.menu-item {
min-width: 2em;
text-align: center;
display: inline-block;
padding: 0.5em 1em;
}
.menu-item:hover {
background-color: #00BBBB;
}
#main {
padding: 2em 4em;
clear: both;
}
.column-lg {
width: 50%;
float: left;
}
<h1>Site Above Fold Content</h1>
<nav id="main-menu">
<div class="site-name">
<a href="#">Title</a>
</div>
<div class="menu-item">
<a href="#">L1</a>
</div>
<div class="menu-item">
<a href="#">L2</a>
</div>
</nav>
<h2>Under Fold Content (Before Floated Columns)</h2>
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred.</p>
<br><br>
<h3>BYE-BYE NAV!!</h3>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<h3>1 Title Impsum Amet</h3>
<p>Lorem ipsum dolor amet bitters ethical microdosing, narwhal jean shorts venmo umami YOLO 90's trust fund activated charcoal lomo pok pok hammock. Man bun marfa blog narwhal letterpress food truck. Umami forage disrupt, snackwave DIY mlkshk aesthetic kogi bitters vice.</p>
</div>
<div class="row">
<h3>2 Title Impsum Amet</h3>
<p>2 Vegan williamsburg jianbing, gluten-free tote bag try-hard mixtape yuccie +1 everyday carry shabby chic umami vexillologist pop-up edison bulb. Whatever everyday carry listicle, coloring book hell of microdosing gastropub banh mi yuccie tumblr art party. Aesthetic hammock kitsch microdosing, viral biodiesel tumblr cliche beard readymade seitan. Copper mug chambray street art raclette shaman fam neutra.</p>
</div>
</div>
<div class="column-lg">
<h2>Lorem Ipusm</h2>
<div class="row">
<p>Gentrify woke irony +1 tote bag lo-fi drinking vinegar. Bushwick YOLO retro pinterest cloud bread skateboard. Small batch retro twee scenester roof party humblebrag celiac 8-bit direct trade franzen flannel cray. Kogi knausgaard godard selfies umami deep v, woke whatever 8-bit prism cred. Intelligentsia heirloom keytar, hot chicken synth tote bag vaporware williamsburg pok pok kickstarter 3 wolf moon selvage hoodie trust fund cronut. Occupy bicycle rights drinking vinegar small batch, vaporware taxidermy flannel live-edge marfa.</p>
</div>
</div>