元素不浮动吗？

Question

div 中的复选框元素不浮动在最右边，如 CSS 中声明的那样。每个新 div 元素的复选框元素浮动都不同。我如何做对？

div.container{
   height : 200px;
   width : 300px;
   box-shadow : 0 0 3px grey;
}
div.drop-down > div { width : 100px; background-color : #dddddd; }
div.drop-down > div input[type="checkbox"]{ float : right; }

<div class='container'>
 <div class='drop-down'>
   <div>one<input type="checkbox"></div>
   <div>two<input type="checkbox"></div>
   <div>three<input type="checkbox"></div>
 </div>
</div>

Answer 1

您在子元素上使用 float 时忘记设置父元素的布局。

设置父元素布局的方式有很多种。您可以使用 overflow: hidden 即：

div.drop-down > div {
  overflow: hidden;
}

或者你也可以使用 :after 伪元素：

div.drop-down > div:after {
  display: block;
  content: '';
  clear: both;
}

div.container{
   height : 200px;
   width : 300px;
   box-shadow : 0 0 3px grey;
}
div.drop-down > div {
  width : 100px; background-color : #dddddd;
  overflow: hidden;
}
div.drop-down > div input[type="checkbox"]{ float : right; }

<div class='container'>
 <div class='drop-down'>
   <div>one<input type="checkbox"></div>
   <div>two<input type="checkbox"></div>
   <div>three<input type="checkbox"></div>
 </div>
</div>

元素不浮动吗？

Element does not float right?

html

css

css-float