浮动定位及清除浮动

浮动定位

我们在写页面的时候会经常使用浮动定位

 <div class="container">
    <div class="item"></div>
    <div>Pea horseradish azuki bean lettuce avocado asparagus okra.</div>
 </div>

.container {
     width: 500px;
     border: 5px solid rgb(111, 41, 97);
     border-radius: .5em;
     padding: 10px;
  }

 .item {
    width: 100px;
    height: 100px;
    float: left;
    margin: 0 20px 20px 0;
    background-color: rgba(111, 41, 97, .3);
 }

缺点：
容易导致外层容器高度塌陷

清除浮动

正是因为浮动定位的缺点，在使用浮动定位后我们需要去清除浮动。

方案一

给使用浮动定位的外层容器设置高度 height

方案二 （推荐）

利用:after给父元素末尾添加一个看不到的块元素来清除浮动，这实际情况下用的最多

div img {
      float: left;
      width: 300px;
}

.clearfix:after{
      content: "020"; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden;  
}

.clearfix {
      /* 触发 hasLayout */ 
      zoom: 1; 
}

<div class="clearfix">
      <img src="./img/1.jpg" alt="">
      <img src="./img/2.jpg" alt="">
      <img src="./img/3.jpg" alt="">
</div>
11111

不用清除浮动的效果

清除浮动的效果