css清除浮动影响

初始代码环境如下：

<style>
  .parent{
    width: 300px;
    border: 1px solid black;
  }
  .child1{
    height: 100px;
    width: 100px;
    border: 1px solid red;
    float: left;
  }
  .child2{
    height: 100px;
    width: 100px;
    border: 1px solid yellow;
    float: right;
  }
</style>
<body>
  <div class="parent">
    <div class="child1">1</div>
    <div class="child2">2</div>
  </div>
</body>

image.png

方法1：（并算不上清除浮动）
在父元素中计算并设定子元素所占高度
即

    .parent{
        width: 300px;
        height: 100px;
        border: 1px solid black;
    }

微信截图_20170804155539.png

方法2：
利用添加子元素clear:both设定

.clear{
  clear:both;
}

<div class="child2">2</div>
<div class="clear"></div>

微信截图_20170804155819.png

方法3：
利用父元素中overflow:hidden

    .parent{
        width: 300px;
        overflow: hidden;
        border: 1px solid black;
    }

微信截图_20170804160122.png

方法4：（与方法2思想一致）
利用伪类选择器构造一个型为div

    .parent:after{
        display: block;
        content:"";
        clear: both;
    }

微信截图_20170804160821.png

最后编辑于：2017.12.09 20:46:02

css清除浮动影响

推荐阅读更多精彩内容