float的疑点记录

2017-05-07  本文已影响6人  李悦之

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

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相关注意点

上一篇 下一篇

猜你喜欢

热点阅读