CSS清除浮动

浮动产生的原因

如果父级设置了CSS边框属性，由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。

代码：

.parent{
          border: 1px solid red;
          background-color: aqua;
          width: 300px;
      }
      .son_left{
          border: 1px solid blue;
          background-color: skyblue;
          width: 100px;
          height: 80px;
          float: left;
      }
      .son_right{
        border: 1px solid yellow;
          background-color: yellowgreen;
          width: 100px;
          height: 50px;
          float: right;
      }

效果图：

解决浮动的方式

1、给父类设置高度

.parent{
          height: 82px;
      }

2、使用css的clear: both属性

首先在父元素标签结束之前添加一个div元素

<div class="parent">
        <div class="son_left"></div>
        <div class="son_right"></div>
        <div class="clear"></div>
    </div>

然后给这个div设置css属性

.clear{
          clear: both;
      }

3、给父元素的css添加overflow: hidden属性

.parent{
          overflow: hidden;
      }

 

解决之后的效果图：