【CSS】使用float浮动遇到的常见问题以及解决方案

使用float遇到的问题

消除浮动后的最后一个元素边距

设置了页面容器宽度固定为某个值后，容器内容若使用浮动布局且设置了右边距，可能出现容器宽度不够的情况，如下图所示。

此时有三种解决方案，第三种方案是本节介绍的重点。

换为flex布局。
使用:nth-child()选出靠右边的元素，取消其右边距。

方法一和方法二均对老版本IE不支持，因此有了方法三，即对该列表外套一层包裹层，设置其右边距为一个合适的负值（目的是为了延长wrapper元素的宽度），使其该值和容器的宽度刚好能容纳这些浮动的内容，代码如下。

html 复制代码

//css
<style>
    .container{
      margin: 0 auto;
      width: 1190px;
      height: 1100px;
      background-color: #f7a745a8;
    }
    .container> .wrapper{
      margin-right: -10px; //关键代码
      height: 200px;
      background-color: #000;

    }
    .container .item-list> .item{
      float: left;
      margin-right: 10px;
      width: 290px;
      background-color: #11de4e;
    }
    .container .item-list> .large-item{
      height: 600px;
    }
    .container .item-list> .small-item{
      margin-bottom: 10px;
      height: 295px;
    }
  </style>
</head>

//html
<div class="container">
    <div class="wrapper">
      <ul class="item-list">
        <li class="item large-item">
          生鲜馆
        </li>
        <li class="item large-item">
          京东图书
        </li>
        <li class="item small-item">
          京东手机
        </li>
        <li class="item small-item">
          京东国际
        </li>
        <li class="item small-item">
          京东京造
        </li>
        <li class="item small-item">
          拍拍二手
        </li>
      </ul>
    </div>
</div>

此时可满足需求，如下图，黑色部分为wrapper元素的背景色。

边框重合问题

在元素有边框的情况下使用浮动后，可能遇到边框重合的问题，此时可以使用margin-top来解决。如下图。

此时为3、4号元素（可以使用:nth-last-child(-n+2)来选中）设置margin-top:-1px即可。注意，设置margin-top使得元素发生位移，因此实际使用中往往还要调节元素的宽高来保证浮动元素的宽高总和等同于父元素宽高。

清除浮动

当一个容器内部所有元素都是浮动元素时，该容器的高度是无法被支撑起来的，可以使用clear属性来清除浮动。

clear属性的值和效果如下。

left：元素上边缘必须要在所有左浮动元素下面。
right：元素上边缘必须要在所有右浮动元素下面。
both：元素上边缘必须要在所有左和右浮动元素下面。

示例如下。

原始情况下，容器内元素向左浮动，父元素高度塌陷，如下图。

使用伪元素加clear属性，为其清楚浮动，代码如下。

html 复制代码

//css
<style>
    .clear_fix::after{
      content: "";
      display: block; //默认情况下为行内级元素，无上边缘，因此清除浮动无效，而块级元素则会有宽度，存在边缘，为其清除浮动才能使它移动到浮动元素的下面。
      clear: both;
      visibility: hidden; //兼容写法，可不写
      height: 0;  //兼容写法，可不写
    }
</style>

//html
<div class="content clear_fix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>