元素为什么不向右浮动？

Question

内的复选框元素没有像CSS中声明的那样浮动到极右边。每个新

元素的复选框元素浮动方式不同。如何使其正确浮动？

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>

- YSuraj

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>

- Mohammad Usman