float的疑点记录

如何让个父级元素包住两个左右浮动的子元素？

html代码：

<div class=parent>
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

CSS代码：

<style>
    .parent{
      width:300px;
      height:300px;
      border:2px solid red;
      position:relative;
      top:50px;
      left:150px;
    }
    .parent > .child1{
      width:80px;
      height:100px;
      border:1px solid green;
      float:left;
      
    }
    .parent > .child2{
      width:80px;
      height:100px;
      border:1px solid blue;
      float:right;
    }
    .parent:after{
      content:"这是一个伪元素";
      display:block;
      background:red;
      clear:both;
    }
</style>

效果如图：

float

接下来只要把.parent:after元素边框和高度都去掉就可以了，这样的话child1和child2在父级元素里左右浮动，而中间不会有其它的东西了。这是用float布局的常见套路。

float相关注意点

• clear:left; 我的左边不能有浮动元素；
• clear:right; 我的右边不能有浮动元素；
• clear:both; 我的两边不能有浮动元素；
• 父级元素的高度是由处于常规流中元素的高度决定的。
• after/before插入的内容依然是在父级元素里，只是在父级元素内容的前后而已。