Does the element not float right?

Question

The checkbox element inside the div does not float in the far right corner, as indicated in CSS. The checkbox element check box is different for each new div element. As I understand?

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>

Run codeHide result

Answer 1

You forgot to set the layout of the parent element when used floatfor child elements.

There are many ways to customize the layout of the parent element. You can use overflow: hiddenie:

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

Alternatively, you can also use a pseudo-element :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>

Run codeHide result