html - 为什么 float 按钮不能保持它们的位置？

Question

在代码片段中，您可以看到，如果我想越过 float 按钮/组，它们将无法保持在相关段中的位置。我的布局有什么问题？ 代码 list 你可以看到https://codepen.io/saveurmind/pen/oWXWOa 放在段中的标题内容，我在原始中使用全尺寸 column(16)。 如果我使用没有“右浮动”的按钮 - 一切正常。

<div class="row">
   <div class="sixteen wide column"> 
    <div class="header-bar">
    <div class="ui segment">
     <div class="header-content">
      <h3 class="ui header">Title</h3>
      <div class="ui right floated basic buttons">
       <div class="ui button">One</div>
       <div class="ui button">Two</div>
       <div class="ui button">Three</div>
      </div>
     </div>
    </div>
    </div>
   </div>
  </div>

Answer 1

您可以使用 clearfix 将子元素包含在父 block 中。

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

如果您想要标题与 btn 具有相同的行，有两种方法:

1. 将 h3 更改为 span(cus h1~h6 将占用整行)

https://codepen.io/hdl881127/pen/bWdRVp

1. 如果你想保留h3，那么你需要添加一个新类

https://codepen.io/hdl881127/pen/BRNZLj

.inlineblock{
  display:inline-block;
}

有关 clearfix 的更多信息，您可以在此处阅读:

What is a clearfix?